lumen-plus 0.0.3 → 0.0.5

package/dist/theme-chalk/divider.scss

@@ -0,0 +1,61 @@
+@use './variables' as *;
+@use './mixins/bem' as *;
+
+@include b('divider') {
+    position: relative;
+    color: $color-text-secondary;
+
+    @include m('horizontal') {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        margin: 16px 0;
+
+        .#{$namespace}-divider__line {
+            flex: 1;
+            border-top: 1px solid $border-color-light;
+        }
+
+        &.is-left { .#{$namespace}-divider__text { margin-left: 8px; } }
+        &.is-right { .#{$namespace}-divider__text { margin-right: 8px; } }
+
+        .#{$namespace}-divider__text {
+            padding: 0 12px;
+            font-size: $font-size-small;
+            color: $color-text-secondary;
+            white-space: nowrap;
+        }
+    }
+
+    @include m('vertical') {
+        display: inline-flex;
+        align-items: stretch;
+        width: 1px;
+        height: 1em;
+        margin: 0 8px;
+
+        .#{$namespace}-divider__line { border-left: 1px solid $border-color-light; }
+    }
+
+    @include m('dashed') {
+        .#{$namespace}-divider__line { border-style: dashed; }
+    }
+
+    @include m('dotted') {
+        .#{$namespace}-divider__line { border-style: dotted; }
+    }
+}
+
+.dark {
+    .#{$namespace}-divider {
+        color: $color-text-dark-secondary;
+
+        .#{$namespace}-divider__line {
+            border-color: $bg-color-dark-lighter;
+        }
+
+        .#{$namespace}-divider__text {
+            color: $color-text-dark-secondary;
+        }
+    }
+}

package/dist/theme-chalk/drawer.scss

@@ -0,0 +1,211 @@
+@use './variables' as *;
+@use './mixins/bem' as *;
+
+@include b('drawer') {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: $z-index-popper;
+    outline: none;
+
+    @include e('overlay') {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.5);
+        animation: drawer-fade-in $transition-duration;
+    }
+
+    &.is-closing {
+        .#{$namespace}-drawer__overlay {
+            animation: drawer-fade-out $transition-duration forwards;
+        }
+    }
+
+    @include e('panel') {
+        position: absolute;
+        background: $bg-color;
+        display: flex;
+        flex-direction: column;
+        box-shadow: $box-shadow-dark;
+    }
+
+    @include m('rtl') {
+        .#{$namespace}-drawer__panel {
+            top: 0;
+            right: 0;
+            bottom: 0;
+            animation: drawer-slide-in-right $transition-duration;
+        }
+
+        &.is-closing .#{$namespace}-drawer__panel {
+            animation: drawer-slide-out-right $transition-duration forwards;
+        }
+    }
+
+    @include m('ltr') {
+        .#{$namespace}-drawer__panel {
+            top: 0;
+            left: 0;
+            bottom: 0;
+            animation: drawer-slide-in-left $transition-duration;
+        }
+
+        &.is-closing .#{$namespace}-drawer__panel {
+            animation: drawer-slide-out-left $transition-duration forwards;
+        }
+    }
+
+    @include m('ttb') {
+        .#{$namespace}-drawer__panel {
+            top: 0;
+            left: 0;
+            right: 0;
+            animation: drawer-slide-in-top $transition-duration;
+        }
+
+        &.is-closing .#{$namespace}-drawer__panel {
+            animation: drawer-slide-out-top $transition-duration forwards;
+        }
+    }
+
+    @include m('btt') {
+        .#{$namespace}-drawer__panel {
+            bottom: 0;
+            left: 0;
+            right: 0;
+            animation: drawer-slide-in-bottom $transition-duration;
+        }
+
+        &.is-closing .#{$namespace}-drawer__panel {
+            animation: drawer-slide-out-bottom $transition-duration forwards;
+        }
+    }
+
+    @include e('header') {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: $spacing-base $spacing-large;
+        border-bottom: 1px solid $border-color-lighter;
+    }
+
+    @include e('title') {
+        font-size: $font-size-large;
+        font-weight: $font-weight-primary;
+        color: $color-text-primary;
+    }
+
+    @include e('close') {
+        border: none;
+        background: transparent;
+        color: $color-text-secondary;
+        cursor: pointer;
+        padding: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: color $transition-duration-fast;
+
+        &:hover {
+            color: $color-text-primary;
+        }
+    }
+
+    @include e('body') {
+        flex: 1;
+        padding: $spacing-large;
+        overflow: auto;
+    }
+
+    @include e('footer') {
+        padding: $spacing-base $spacing-large;
+        border-top: 1px solid $border-color-lighter;
+    }
+}
+
+@keyframes drawer-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes drawer-fade-out {
+    from { opacity: 1; }
+    to { opacity: 0; }
+}
+
+@keyframes drawer-slide-in-right {
+    from { transform: translateX(100%); }
+    to { transform: translateX(0); }
+}
+
+@keyframes drawer-slide-out-right {
+    from { transform: translateX(0); }
+    to { transform: translateX(100%); }
+}
+
+@keyframes drawer-slide-in-left {
+    from { transform: translateX(-100%); }
+    to { transform: translateX(0); }
+}
+
+@keyframes drawer-slide-out-left {
+    from { transform: translateX(0); }
+    to { transform: translateX(-100%); }
+}
+
+@keyframes drawer-slide-in-top {
+    from { transform: translateY(-100%); }
+    to { transform: translateY(0); }
+}
+
+@keyframes drawer-slide-out-top {
+    from { transform: translateY(0); }
+    to { transform: translateY(-100%); }
+}
+
+@keyframes drawer-slide-in-bottom {
+    from { transform: translateY(100%); }
+    to { transform: translateY(0); }
+}
+
+@keyframes drawer-slide-out-bottom {
+    from { transform: translateY(0); }
+    to { transform: translateY(100%); }
+}
+
+.dark {
+    .#{$namespace}-drawer {
+        .#{$namespace}-drawer__panel {
+            background: $bg-color-dark-light;
+        }
+
+        .#{$namespace}-drawer__header {
+            border-bottom-color: $bg-color-dark-lighter;
+        }
+
+        .#{$namespace}-drawer__title {
+            color: $color-text-dark;
+        }
+
+        .#{$namespace}-drawer__close {
+            color: $color-text-dark-secondary;
+
+            &:hover {
+                color: $color-text-dark;
+            }
+        }
+
+        .#{$namespace}-drawer__body {
+            color: $color-text-dark;
+        }
+
+        .#{$namespace}-drawer__footer {
+            border-top-color: $bg-color-dark-lighter;
+        }
+    }
+}

package/dist/theme-chalk/dropdown.scss

@@ -0,0 +1,230 @@
+@use './variables' as *;
+@use './mixins/bem' as *;
+
+// Dropdown
+@include b('dropdown') {
+    display: inline-flex;
+    position: relative;
+    color: $color-text-regular;
+    font-size: $font-size-base;
+    line-height: 1;
+    vertical-align: top;
+
+    // Size
+    @include m('large') {
+        font-size: calc(#{$font-size-base} + 2px);
+        .#{$namespace}-dropdown__caret svg { width: 14px; height: 14px; }
+    }
+    @include m('small') {
+        font-size: calc(#{$font-size-base} - 2px);
+        .#{$namespace}-dropdown__caret svg { width: 10px; height: 10px; }
+    }
+
+    // Trigger
+    @include e('trigger') {
+        display: inline-flex;
+        align-items: center;
+        cursor: pointer;
+        outline: none;
+        transition: color $transition-duration-fast;
+
+        &:hover { color: $color-primary-light; }
+    }
+
+    @include e('trigger-icon') {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 6px;
+        pointer-events: none;
+    }
+
+    @include e('trigger-prefix') {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 6px;
+        pointer-events: none;
+    }
+
+    // Caret
+    @include e('caret') {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 8px;
+        color: currentColor;
+        transition: transform $transition-duration-fast;
+
+        svg {
+            width: 12px;
+            height: 12px;
+            fill: none;
+            stroke: currentColor;
+            stroke-width: 2;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+        }
+    }
+
+    &.is-open .#{$namespace}-dropdown__caret { transform: rotate(180deg); }
+
+    // Split Button
+    @include e('split-button') {
+        display: inline-flex;
+
+        .#{$namespace}-button-group { display: inline-flex; }
+
+        .#{$namespace}-button:first-child {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-right-color: rgba(255, 255, 255, 0.5);
+        }
+
+        .#{$namespace}-dropdown__caret-button {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            border-left-color: rgba(255, 255, 255, 0.5);
+            padding: 0 10px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+
+            svg {
+                width: 12px;
+                height: 12px;
+                fill: none;
+                stroke: currentColor;
+                stroke-width: 2;
+                stroke-linecap: round;
+                stroke-linejoin: round;
+            }
+        }
+    }
+
+    // Popper
+    @include e('popper') {
+        // 位置通过 CSS 变量控制（组件仅设置变量，避免硬编码内联 style 字符串）
+        position: fixed;
+        top: var(--lm-dropdown-top, -9999px);
+        left: var(--lm-dropdown-left, -9999px);
+        z-index: 2000;
+
+        --lm-dropdown-bg: #{$bg-color-overlay};
+        --lm-dropdown-border: #{$border-color-light};
+        --lm-dropdown-arrow: 8px;
+        --lm-dropdown-max-height: 300px;
+        --lm-dropdown-arrow-edge: 16px;
+
+        // 不在 popper 上做 opacity/transform 动画，避免和 Svelte transition 冲突
+        pointer-events: none;
+    }
+
+    &.is-open .#{$namespace}-dropdown__popper {
+        pointer-events: auto;
+    }
+
+    // Motion wrapper：承载外观与布局，动画由 Svelte transition 控制
+    @include e('motion') {
+        position: relative;
+        background: var(--lm-dropdown-bg);
+        border: 1px solid var(--lm-dropdown-border);
+        border-radius: $border-radius-base;
+        box-shadow: $box-shadow-light;
+        padding: 4px 0;
+        min-width: 100px;
+        width: max-content;
+        will-change: transform, opacity;
+
+        &.is-bottom, &.is-bottom-start, &.is-bottom-end { transform-origin: top center; }
+        &.is-top, &.is-top-start, &.is-top-end { transform-origin: bottom center; }
+    }
+
+    // Arrow
+    @include e('arrow') {
+        position: absolute;
+        width: var(--lm-dropdown-arrow);
+        height: var(--lm-dropdown-arrow);
+        pointer-events: none;
+        z-index: 0;
+
+        &::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: var(--lm-dropdown-bg);
+            transform: rotate(45deg);
+            border-radius: calc(var(--lm-dropdown-arrow) * 0.2);
+        }
+    }
+
+    @include e('content') {
+        position: relative;
+        z-index: 1;
+        max-height: var(--lm-dropdown-max-height);
+        overflow-y: auto;
+    }
+}
+
+// Arrow Position (只保留上下方向)
+.#{$namespace}-dropdown__popper {
+    &.is-bottom .#{$namespace}-dropdown__arrow,
+    &.is-bottom-start .#{$namespace}-dropdown__arrow,
+    &.is-bottom-end .#{$namespace}-dropdown__arrow {
+        top: calc(var(--lm-dropdown-arrow) / -2 + 1px);
+        &::before { box-shadow: -1px -1px 0 0 var(--lm-dropdown-border); }
+    }
+    &.is-bottom .#{$namespace}-dropdown__arrow { left: 50%; transform: translateX(-50%); }
+    &.is-bottom-start .#{$namespace}-dropdown__arrow { left: var(--lm-dropdown-arrow-edge); }
+    &.is-bottom-end .#{$namespace}-dropdown__arrow { right: var(--lm-dropdown-arrow-edge); }
+
+    &.is-top .#{$namespace}-dropdown__arrow,
+    &.is-top-start .#{$namespace}-dropdown__arrow,
+    &.is-top-end .#{$namespace}-dropdown__arrow {
+        bottom: calc(var(--lm-dropdown-arrow) / -2 + 1px);
+        &::before { box-shadow: 1px 1px 0 0 var(--lm-dropdown-border); }
+    }
+    &.is-top .#{$namespace}-dropdown__arrow { left: 50%; transform: translateX(-50%); }
+    &.is-top-start .#{$namespace}-dropdown__arrow { left: var(--lm-dropdown-arrow-edge); }
+    &.is-top-end .#{$namespace}-dropdown__arrow { right: var(--lm-dropdown-arrow-edge); }
+}
+
+// Menu
+@include b('dropdown-menu') { list-style: none; margin: 0; padding: 0; }
+
+// Item
+@include b('dropdown-item') {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    font-size: $font-size-base;
+    color: $color-text-regular;
+    cursor: pointer;
+    white-space: nowrap;
+    line-height: 1.4;
+    transition: background-color $transition-duration-fast, color $transition-duration-fast;
+
+    &:hover, &:focus { background-color: $fill-color-light; color: $color-primary; }
+    &.is-disabled { color: $color-text-placeholder; cursor: not-allowed; pointer-events: none; }
+        &.is-divided { margin-top: 4px; border-top: 1px solid $border-color-lighter; padding-top: 12px; }
+
+        @include e('icon') { display: inline-flex; width: 16px; height: 16px; flex-shrink: 0; align-items: center; justify-content: center; margin-right: 2px; }
+}
+
+// Dark Mode
+.dark {
+    .#{$namespace}-dropdown {
+        color: $color-text-dark;
+    }
+    .#{$namespace}-dropdown__popper {
+        --lm-dropdown-bg: #{$bg-color-dark-overlay};
+        --lm-dropdown-border: #{$border-color-dark-light};
+    }
+    .#{$namespace}-dropdown-item {
+        color: $color-text-dark;
+        &:hover, &:focus { background-color: $bg-color-dark-lighter; color: $color-primary; }
+        &.is-disabled { color: $color-text-dark-placeholder; }
+        &.is-divided { border-top-color: $border-color-dark-light; }
+    }
+}

package/dist/theme-chalk/empty.scss

@@ -0,0 +1,36 @@
+@use './variables' as *;
+@use './mixins/bem' as *;
+
+@include b('empty') {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+    color: $color-text-secondary;
+
+    @include e('image') {
+        width: 64px;
+        height: 41px;
+        margin-bottom: 12px;
+        opacity: 0.9;
+        svg { display: block; width: 100%; height: 100%; }
+    }
+
+    @include e('description') {
+        font-size: $font-size-small;
+        margin-bottom: 12px;
+        text-align: center;
+    }
+
+    @include e('actions') {
+        display: inline-flex;
+        gap: 8px;
+    }
+}
+
+.dark {
+    .#{$namespace}-empty {
+        color: $color-text-dark-secondary;
+    }
+}