@lancar/lxui 1.0.0

package/css/components/button.css

@@ -0,0 +1,103 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Button */
+/* ── Button ── */
+.lx-btn {
+  display:          inline-flex;
+  align-items:      center;
+  justify-content:  center;
+  gap:              0.375rem;
+  padding:          var(--lx-btn-padding-y) var(--lx-btn-padding-x);
+  font-size:        var(--lx-btn-font-size);
+  font-weight:      var(--lx-btn-font-weight);
+  line-height:      1.5;
+  border-radius:    var(--lx-btn-radius);
+  border:           1px solid transparent;
+  background:       transparent;
+  cursor:           pointer;
+  text-decoration:  none;
+  white-space:      nowrap;
+  transition:       var(--lx-btn-transition);
+  user-select:      none;
+  -webkit-appearance: none;
+}
+.lx-btn:focus-visible { outline: 2px solid var(--lx-primary); outline-offset: 2px; }
+.lx-btn:disabled, .lx-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }
+
+.lx-btn-xs  { padding: .2rem .5rem;    font-size: .7rem; }
+.lx-btn-sm  { padding: .35rem .75rem;  font-size: .8rem; }
+.lx-btn-lg  { padding: .65rem 1.25rem; font-size: 1rem; }
+.lx-btn-xl  { padding: .8rem 1.5rem;   font-size: 1.1rem; }
+.lx-btn-block { width: 100%; justify-content: center; }
+.lx-btn-icon  { padding: var(--lx-btn-padding-y); aspect-ratio: 1; }
+
+.lx-btn-primary   { background: var(--lx-primary,#3b82f6);    color: var(--lx-primary-fg,#fff);   border-color: var(--lx-primary,#3b82f6); }
+.lx-btn-primary:hover   { background: var(--lx-primary-hover,#2563eb); border-color: var(--lx-primary-hover,#2563eb); }
+.lx-btn-secondary { background: var(--lx-secondary,#6b7280);  color: var(--lx-secondary-fg,#fff); border-color: var(--lx-secondary,#6b7280); }
+.lx-btn-secondary:hover { background: var(--lx-secondary-hover,#4b5563); border-color: var(--lx-secondary-hover,#4b5563); }
+.lx-btn-success   { background: var(--lx-success,#22c55e);    color: var(--lx-success-fg,#fff);   border-color: var(--lx-success,#22c55e); }
+.lx-btn-success:hover   { background: var(--lx-success-hover,#16a34a);  border-color: var(--lx-success-hover,#16a34a); }
+.lx-btn-warning   { background: var(--lx-warning,#f59e0b);    color: var(--lx-warning-fg,#fff);   border-color: var(--lx-warning,#f59e0b); }
+.lx-btn-warning:hover   { background: var(--lx-warning-hover,#d97706);  border-color: var(--lx-warning-hover,#d97706); }
+.lx-btn-danger    { background: var(--lx-danger,#ef4444);     color: var(--lx-danger-fg,#fff);    border-color: var(--lx-danger,#ef4444); }
+.lx-btn-danger:hover    { background: var(--lx-danger-hover,#dc2626);   border-color: var(--lx-danger-hover,#dc2626); }
+.lx-btn-info      { background: var(--lx-info,#06b6d4);       color: var(--lx-info-fg,#fff);      border-color: var(--lx-info,#06b6d4); }
+.lx-btn-info:hover      { background: var(--lx-info-hover,#0891b2);     border-color: var(--lx-info-hover,#0891b2); }
+.lx-btn-dark      { background: var(--lx-dark,#1f2937);       color: #fff;                        border-color: var(--lx-dark,#1f2937); }
+.lx-btn-dark:hover      { background: var(--lx-gray-700,#374151); }
+.lx-btn-light     { background: var(--lx-light,#f9fafb);      color: var(--lx-text,#111827);      border-color: var(--border-default,#e5e7eb); }
+.lx-btn-light:hover     { background: var(--lx-gray-200,#e5e7eb); }
+
+.lx-btn-outline-primary   { border-color: var(--lx-primary,#3b82f6);   color: var(--lx-primary,#3b82f6); }
+.lx-btn-outline-primary:hover   { background: var(--lx-primary,#3b82f6);   color: #fff; }
+.lx-btn-outline-secondary { border-color: var(--lx-secondary,#6b7280); color: var(--lx-secondary,#6b7280); }
+.lx-btn-outline-secondary:hover { background: var(--lx-secondary,#6b7280); color: #fff; }
+.lx-btn-outline-success   { border-color: var(--lx-success,#22c55e);   color: var(--lx-success,#22c55e); }
+.lx-btn-outline-success:hover   { background: var(--lx-success,#22c55e);   color: #fff; }
+.lx-btn-outline-warning   { border-color: var(--lx-warning,#f59e0b);   color: var(--lx-warning,#f59e0b); }
+.lx-btn-outline-warning:hover   { background: var(--lx-warning,#f59e0b);   color: #fff; }
+.lx-btn-outline-danger    { border-color: var(--lx-danger,#ef4444);    color: var(--lx-danger,#ef4444); }
+.lx-btn-outline-danger:hover    { background: var(--lx-danger,#ef4444);    color: #fff; }
+.lx-btn-outline-info      { border-color: var(--lx-info,#06b6d4);      color: var(--lx-info,#06b6d4); }
+.lx-btn-outline-info:hover      { background: var(--lx-info,#06b6d4);      color: #fff; }
+
+.lx-btn-ghost         { color: var(--lx-text-secondary,#6b7280); }
+.lx-btn-ghost:hover   { background: var(--lx-bg-muted,#f3f4f6); color: var(--lx-text,#111827); }
+.lx-btn-ghost-primary { color: var(--lx-primary,#3b82f6); }
+.lx-btn-ghost-primary:hover { background: var(--lx-primary-subtle,#dbeafe); }
+
+.lx-btn-link       { color: var(--lx-primary,#3b82f6); text-decoration: underline; }
+.lx-btn-link:hover { color: var(--lx-primary-hover,#2563eb); }
+
+.lx-btn-group { display: inline-flex; border-radius: var(--lx-radius,8px); overflow: hidden; }
+.lx-btn-group .lx-btn { border-radius: 0; border-inline-end-width: 0; }
+.lx-btn-group .lx-btn:first-child { border-radius: var(--lx-radius,8px) 0 0 var(--lx-radius,8px); }
+.lx-btn-group .lx-btn:last-child  { border-radius: 0 var(--lx-radius,8px) var(--lx-radius,8px) 0; border-inline-end-width: 1px; }
+
+.lx-btn-group-vertical { display: inline-flex; flex-direction: column; }
+.lx-btn-group-vertical .lx-btn { border-radius: 0; border-bottom-width: 0; }
+.lx-btn-group-vertical .lx-btn:first-child { border-radius: var(--lx-radius,8px) var(--lx-radius,8px) 0 0; }
+.lx-btn-group-vertical .lx-btn:last-child  { border-radius: 0 0 var(--lx-radius,8px) var(--lx-radius,8px); border-bottom-width: 1px; }
+
+.lx-btn-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; }
+.lx-btn-check   { position: absolute; clip: rect(0,0,0,0); pointer-events: none; }
+.lx-btn-close {
+  display:        flex;
+  align-items:    center;
+  justify-content:center;
+  width:          2rem;
+  height:         2rem;
+  padding:        0;
+  background:     transparent;
+  border:         none;
+  border-radius:  var(--lx-radius-full,9999px);
+  cursor:         pointer;
+  opacity:        .5;
+  transition:     var(--lx-transition);
+  font-size:      1.2rem;
+  line-height:    1;
+  color:          var(--lx-text,#111827);
+}
+.lx-btn-close::before { content: "×"; }
+.lx-btn-close:hover   { opacity: 1; background: var(--lx-bg-muted,#f3f4f6); }
+.lx-btn-close-white   { color: #fff; }
+.lx-btn-close-white:hover { background: rgba(255,255,255,.15); }

package/css/components/callout.css

@@ -0,0 +1,20 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Notice / Callout */
+/* ── Notice / Callout ── */
+.lx-callout {
+  display:     flex;
+  gap:         .875rem;
+  padding:     1rem 1.25rem;
+  border-radius: var(--lx-radius,8px);
+  border-inline-start: 4px solid var(--lx-primary,#3b82f6);
+  background:  var(--lx-primary-subtle,#dbeafe);
+  font-size:   var(--lx-text-sm,0.875rem);
+  color:       var(--lx-text,#111827);
+}
+.lx-callout-icon { flex-shrink: 0; font-size: 1.125rem; }
+.lx-callout-title { font-weight: 700; margin-bottom: .25rem; }
+.lx-callout-body  { color: var(--lx-text-secondary,#6b7280); line-height: 1.6; }
+.lx-callout-success { border-color: var(--lx-success,#22c55e); background: var(--lx-success-subtle,#f0fdf4); }
+.lx-callout-warning { border-color: var(--lx-warning,#f59e0b); background: var(--lx-warning-subtle,#fffbeb); }
+.lx-callout-danger  { border-color: var(--lx-danger,#ef4444);  background: var(--lx-danger-subtle,#fef2f2); }
+.lx-callout-info    { border-color: var(--lx-info,#06b6d4);    background: var(--lx-info-subtle,#ecfeff); }

package/css/components/card.css

@@ -0,0 +1,42 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Card */
+/* ── Card ── */
+.lx-card {
+  background:    var(--lx-bg,#fff);
+  border:        var(--lx-card-border);
+  border-radius: var(--lx-card-radius);
+  box-shadow:    var(--lx-card-shadow);
+  overflow:      hidden;
+}
+.lx-card-hover { -webkit-transition: var(--lx-transition); transition: var(--lx-transition); }
+.lx-card-hover:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); -webkit-box-shadow: var(--lx-shadow-lg); box-shadow: var(--lx-shadow-lg); }
+
+.lx-card-header {
+  padding:        .875rem var(--lx-card-padding);
+  border-bottom:  1px solid var(--lx-border,#e5e7eb);
+  background:     var(--lx-bg-soft,#f9fafb);
+  font-weight:    600;
+  font-size:      var(--lx-text-sm,0.875rem);
+  color:          var(--lx-text-secondary,#6b7280);
+  text-transform: uppercase;
+  letter-spacing: .05em;
+}
+.lx-card-body    { padding: var(--lx-card-padding); }
+.lx-card-footer  { padding: .875rem var(--lx-card-padding); border-top: 1px solid var(--lx-border,#e5e7eb); background: var(--lx-bg-soft,#f9fafb); }
+.lx-card-title   { font-size: var(--lx-text-lg,1.125rem); font-weight: 600; margin-bottom: .5rem; color: var(--lx-text,#111827); }
+.lx-card-subtitle{ font-size: var(--lx-text-sm,0.875rem); color: var(--lx-text-muted,#9ca3af); margin-top: -.25rem; margin-bottom: .75rem; }
+.lx-card-text    { color: var(--lx-text-secondary,#6b7280); line-height: 1.65; }
+
+.lx-card-img-top        { width: 100%; object-fit: cover; display: block; }
+.lx-card-img-side       { object-fit: cover; flex-shrink: 0; }
+.lx-card-img            { width: 100%; height: 100%; object-fit: cover; }
+.lx-card-img-overlay-wrap { position: relative; }
+.lx-card-img-overlay {
+  position:    absolute;
+  inset:       0;
+  padding:     var(--lx-card-padding);
+  display:     flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  background:  linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 60%);
+}

package/css/components/carousel.css

@@ -0,0 +1,31 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Carousel */
+/* ── Carousel ── */
+.lx-carousel { position: relative; overflow: hidden; }
+.lx-carousel-inner {
+  display:   flex;
+  -webkit-transition: -webkit-transform .35s ease;
+  transition: transform .35s ease;
+  will-change: transform;
+}
+.lx-carousel-item  { min-width: 100%; flex-shrink: 0; }
+.lx-carousel-indicators {
+  position: absolute; bottom: 1rem; inset-inline: 0;
+  display: flex; justify-content: center; gap: .375rem;
+  z-index: 2; list-style: none; padding: 0; margin: 0;
+}
+.lx-carousel-indicators button { width: 8px; height: 8px; border-radius: 50%; border: none; background: rgba(255,255,255,.5); cursor: pointer; padding: 0; transition: var(--lx-transition); }
+.lx-carousel-indicators button.lx-active { background: #fff; width: 20px; border-radius: 4px; }
+.lx-carousel-control {
+  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
+  background: rgba(0,0,0,.35); border: none; color: white;
+  width: 2.5rem; height: 2.5rem; border-radius: 50%; cursor: pointer;
+  display: flex; align-items: center; justify-content: center; transition: var(--lx-transition);
+}
+.lx-carousel-control:hover  { background: rgba(0,0,0,.6); }
+.lx-carousel-prev           { inset-inline-start: 1rem; }
+.lx-carousel-next           { inset-inline-end: 1rem; }
+.lx-carousel-prev-icon::before { content: "‹"; font-size: 1.5rem; line-height: 1; }
+.lx-carousel-next-icon::before { content: "›"; font-size: 1.5rem; line-height: 1; }
+.lx-carousel-caption { position: absolute; bottom: 3rem; inset-inline: 15%; text-align: center; color: white; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
+.lx-carousel-caption h5 { font-size: var(--lx-text-xl,1.25rem); font-weight: 700; margin-bottom: .5rem; }

package/css/components/chip.css

@@ -0,0 +1,52 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Chip / Tag */
+/* ── Chip / Tag ── */
+.lx-chip {
+  display:       inline-flex;
+  align-items:   center;
+  gap:           .375rem;
+  padding:       .25rem .625rem;
+  font-size:     var(--lx-text-xs,0.75rem);
+  font-weight:   500;
+  line-height:   1;
+  border-radius: var(--lx-radius-full,9999px);
+  border:        1px solid var(--border-default,#e5e7eb);
+  background:    var(--bg-secondary,#f9fafb);
+  color:         var(--lx-text-secondary,#6b7280);
+  cursor:        default;
+  white-space:   nowrap;
+  transition:    background .15s ease, border-color .15s ease;
+  -webkit-user-select: none;
+  user-select:   none;
+}
+.lx-chip-dismiss {
+  display:         flex;
+  align-items:     center;
+  justify-content: center;
+  width:           .875rem;
+  height:          .875rem;
+  border-radius:   50%;
+  background:      transparent;
+  border:          none;
+  cursor:          pointer;
+  padding:         0;
+  font-size:       .75rem;
+  line-height:     1;
+  color:           inherit;
+  opacity:         .6;
+  transition:      opacity .15s ease, background .15s ease;
+}
+.lx-chip-dismiss:hover { opacity: 1; background: rgba(0,0,0,.1); }
+.lx-chip-dismiss::before { content: "×"; }
+.lx-chip-interactive { cursor: pointer; }
+.lx-chip-interactive:hover { background: var(--bg-tertiary,#f3f4f6); border-color: var(--border-strong,#d1d5db); }
+.lx-chip-selected { background: var(--lx-primary-subtle,#dbeafe); border-color: var(--lx-primary,#3b82f6); color: var(--lx-primary,#3b82f6); }
+.lx-chip-primary   { background: var(--lx-primary-subtle,#dbeafe); border-color: var(--lx-primary,#3b82f6); color: var(--lx-primary,#3b82f6); }
+.lx-chip-success   { background: var(--lx-success-subtle,#f0fdf4); border-color: var(--lx-success,#22c55e); color: var(--lx-success-hover,#16a34a); }
+.lx-chip-warning   { background: var(--lx-warning-subtle,#fffbeb); border-color: var(--lx-warning,#f59e0b); color: var(--lx-warning-hover,#d97706); }
+.lx-chip-danger    { background: var(--lx-danger-subtle,#fef2f2); border-color: var(--lx-danger,#ef4444); color: var(--lx-danger-hover,#dc2626); }
+.lx-chip-info      { background: var(--lx-info-subtle,#ecfeff); border-color: var(--lx-info,#06b6d4); color: var(--lx-info-hover,#0891b2); }
+.lx-chip-dark      { background: var(--lx-dark,#1f2937); border-color: var(--lx-dark,#1f2937); color: #fff; }
+.lx-chip-sm { padding: .15rem .5rem; font-size: .65rem; }
+.lx-chip-lg { padding: .375rem .875rem; font-size: .8rem; }
+.lx-chip-dot::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }

package/css/components/code-block.css

@@ -0,0 +1,22 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Code Block with Copy */
+/* ── Code Block with Copy ── */
+.lx-code-block { position: relative; }
+.lx-code-block pre { margin: 0; }
+.lx-code-copy {
+  position:   absolute;
+  top:        .625rem;
+  inset-inline-end: .625rem;
+  padding:    .25rem .625rem;
+  font-size:  .7rem;
+  font-weight: 600;
+  background: rgba(255,255,255,.1);
+  border:     1px solid rgba(255,255,255,.15);
+  border-radius: var(--lx-radius-sm,4px);
+  color:      rgba(255,255,255,.7);
+  cursor:     pointer;
+  -webkit-transition: background .15s ease, color .15s ease;
+  transition: background .15s ease, color .15s ease;
+}
+.lx-code-copy:hover { background: rgba(255,255,255,.2); color: #fff; }
+.lx-code-copy.lx-copied { background: var(--lx-success,#22c55e); border-color: var(--lx-success,#22c55e); color: #fff; }

package/css/components/collapse.css

@@ -0,0 +1,6 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Collapse */
+/* ── Collapse ── */
+.lx-collapse          { display: none; }
+.lx-collapse.lx-show  { display: block; animation: lx-fadein .2s ease; }
+.lx-collapsing        { overflow: hidden; transition: height .3s ease; }

package/css/components/compat.css

@@ -0,0 +1,27 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Browser-compatibility patches */
+/* ── Browser-compatibility patches ── */
+@supports not (aspect-ratio: 1) {
+  /* Fallback for browsers without native aspect-ratio (Safari < 15) */
+  .lx-ratio-1x1 { padding-top: 100%; }
+  .lx-ratio-4x3 { padding-top: 75%; }
+  .lx-ratio-16x9{ padding-top: 56.25%; }
+  .lx-ratio-21x9{ padding-top: 42.857%; }
+}
+@supports not (inset: 0) {
+  /* Fallback for inset shorthand (older Safari/Firefox) */
+  .lx-modal        { top:0; right:0; bottom:0; left:0; }
+  .lx-modal-backdrop { top:0; right:0; bottom:0; left:0; }
+  .lx-offcanvas-backdrop { top:0; right:0; bottom:0; left:0; }
+  .lx-loading-overlay { top:0; right:0; bottom:0; left:0; }
+  .lx-inset-0 { top:0; right:0; bottom:0; left:0; }
+}
+@supports not (gap: 1rem) {
+  /* Fallback for flex gap (older browsers) */
+  .lx-nav > * + * { margin-inline-start: .125rem; }
+  .lx-pagination > * + * { margin-inline-start: .125rem; }
+}
+/* Smooth scroll polyfill flag */
+@media (prefers-reduced-motion: no-preference) {
+  html { scroll-behavior: smooth; }
+}

package/css/components/dark-mode.css

@@ -0,0 +1,35 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Dark mode semantic overrides */
+/* ── Dark mode semantic overrides ── */
+[data-mode="dark"],
+.dark {
+  --bg-primary:     #111827;
+  --bg-secondary:   #1f2937;
+  --bg-tertiary:    #374151;
+  --surface:        #1f2937;
+  --text-primary:   #f9fafb;
+  --text-secondary: #d1d5db;
+  --text-muted:     #9ca3af;
+  --border-strong:  #4b5563;
+  --border-default: #374151;
+  --border-subtle:  #1f2937;
+  --accent-subtle:  #1e3a5f;
+  --lx-bg:          #111827;
+  --lx-bg-soft:     #1f2937;
+  --lx-bg-muted:    #374151;
+  --lx-text:        #f9fafb;
+  --lx-text-secondary: #d1d5db;
+  --lx-text-muted:  #9ca3af;
+  --lx-border:      #374151;
+  --lx-border-strong: #4b5563;
+}
+[data-mode="dark"] .lx-card,
+.dark .lx-card { background: var(--bg-secondary,#1f2937); }
+[data-mode="dark"] .lx-modal-content,
+.dark .lx-modal-content { background: var(--bg-secondary,#1f2937); }
+[data-mode="dark"] .lx-dropdown-menu,
+.dark .lx-dropdown-menu { background: var(--bg-secondary,#1f2937); }
+[data-mode="dark"] .lx-stat,
+.dark .lx-stat { background: var(--bg-secondary,#1f2937); }
+[data-mode="dark"] .lx-file-drop,
+.dark .lx-file-drop { background: var(--bg-secondary,#1f2937); }

package/css/components/divider.css

@@ -0,0 +1,36 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Divider */
+/* ── Divider ── */
+.lx-divider {
+  display:     flex;
+  align-items: center;
+  gap:         .75rem;
+  border:      none;
+  margin:      1.5rem 0;
+  color:       var(--lx-text-muted,#9ca3af);
+  font-size:   var(--lx-text-xs,0.75rem);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  white-space: nowrap;
+}
+.lx-divider::before,
+.lx-divider::after {
+  content:    "";
+  flex:       1;
+  height:     1px;
+  background: var(--border-default,#e5e7eb);
+}
+.lx-divider-vertical {
+  display:        inline-flex;
+  align-self:     stretch;
+  width:          1px;
+  height:         auto;
+  background:     var(--border-default,#e5e7eb);
+  margin-inline:  .75rem;
+}
+.lx-divider-primary { color: var(--lx-primary,#3b82f6); }
+.lx-divider-primary::before,
+.lx-divider-primary::after { background: var(--lx-primary,#3b82f6); }
+.lx-divider-dashed::before,
+.lx-divider-dashed::after { background: none; border-top: 1px dashed var(--border-default,#e5e7eb); }

package/css/components/dropdown.css

@@ -0,0 +1,39 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Dropdown */
+/* ── Dropdown ── */
+.lx-dropdown { position: relative; display: inline-block; }
+.lx-dropdown-toggle::after {
+  content: ""; display: inline-block;
+  width: .35em; height: .35em;
+  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
+  transform: rotate(45deg) translateY(-.1em);
+  margin-inline-start: .4em; vertical-align: .1em;
+}
+.lx-dropdown-menu {
+  display: none; position: absolute;
+  inset-block-start: calc(100% + .25rem); inset-inline-start: 0;
+  min-width: 10rem; padding: .375rem;
+  background: var(--lx-bg,#fff); border: 1px solid var(--border-default,#e5e7eb);
+  border-radius: var(--lx-radius-md,12px); box-shadow: var(--lx-shadow-lg);
+  z-index: var(--lx-z-dropdown,1000); list-style: none;
+  animation: lx-dropdown-in .1s ease;
+}
+.lx-dropdown-menu.lx-show { display: block; }
+.lx-dropdown-menu.lx-dropdown-menu-end { inset-inline-start: auto; inset-inline-end: 0; }
+.lx-dropup    .lx-dropdown-menu { top: auto; bottom: calc(100% + .25rem); }
+.lx-dropend   .lx-dropdown-menu { top: 0; inset-inline-start: calc(100% + .25rem); }
+.lx-dropstart .lx-dropdown-menu { top: 0; inset-inline-start: auto; inset-inline-end: calc(100% + .25rem); }
+.lx-dropdown-item {
+  display: flex; align-items: center; width: 100%; padding: .45rem .75rem;
+  font-size: var(--lx-text-sm,0.875rem); color: var(--lx-text-secondary,#6b7280);
+  background: transparent; border: none; border-radius: var(--lx-radius,8px);
+  cursor: pointer; white-space: nowrap; text-decoration: none;
+  transition: background .1s ease, color .1s ease;
+}
+.lx-dropdown-item:hover    { background: var(--lx-bg-muted,#f3f4f6); color: var(--lx-text,#111827); }
+.lx-dropdown-item.lx-active { background: var(--lx-primary-subtle,#dbeafe); color: var(--lx-primary,#3b82f6); font-weight: 500; }
+.lx-dropdown-item.lx-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
+.lx-dropdown-header { padding: .375rem .75rem; font-size: .7rem; font-weight: 700; color: var(--lx-text-muted,#9ca3af); text-transform: uppercase; letter-spacing: .05em; }
+.lx-dropdown-divider { border: none; border-top: 1px solid var(--border-default,#e5e7eb); margin: .375rem 0; }
+@-webkit-keyframes lx-dropdown-in { from { opacity: 0; -webkit-transform: translateY(-4px); } to { opacity: 1; -webkit-transform: translateY(0); } }
+@keyframes lx-dropdown-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

package/css/components/empty.css

@@ -0,0 +1,34 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Empty State */
+/* ── Empty State ── */
+.lx-empty {
+  display:         flex;
+  flex-direction:  column;
+  align-items:     center;
+  justify-content: center;
+  text-align:      center;
+  padding:         3rem 1.5rem;
+  color:           var(--lx-text-muted,#9ca3af);
+}
+.lx-empty-icon {
+  font-size:      3rem;
+  line-height:    1;
+  margin-bottom:  1rem;
+  opacity:        .5;
+}
+.lx-empty-title {
+  font-size:      var(--lx-text-lg,1.125rem);
+  font-weight:    600;
+  color:          var(--lx-text,#111827);
+  margin-bottom:  .375rem;
+}
+.lx-empty-desc {
+  font-size:      var(--lx-text-sm,0.875rem);
+  color:          var(--lx-text-muted,#9ca3af);
+  max-width:      24rem;
+  line-height:    1.65;
+  margin-bottom:  1.25rem;
+}
+.lx-empty-sm { padding: 1.5rem 1rem; }
+.lx-empty-sm .lx-empty-icon { font-size: 2rem; margin-bottom: .625rem; }
+.lx-empty-sm .lx-empty-title { font-size: var(--lx-text-base,1rem); }

package/css/components/fab.css

@@ -0,0 +1,28 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Floating Action Button */
+/* ── Floating Action Button ── */
+.lx-fab {
+  position:        fixed;
+  inset-inline-end: 1.5rem;
+  bottom:          1.5rem;
+  z-index:         var(--lx-z-fixed,1030);
+  display:         flex;
+  align-items:     center;
+  justify-content: center;
+  width:           3.5rem;
+  height:          3.5rem;
+  border-radius:   50%;
+  background:      var(--lx-primary,#3b82f6);
+  color:           #fff;
+  border:          none;
+  cursor:          pointer;
+  -webkit-box-shadow: var(--lx-shadow-lg);
+  box-shadow:      var(--lx-shadow-lg);
+  font-size:       1.5rem;
+  -webkit-transition: -webkit-transform .2s ease, -webkit-box-shadow .2s ease;
+  transition:      transform .2s ease, box-shadow .2s ease;
+  text-decoration: none;
+}
+.lx-fab:hover { -webkit-transform: scale(1.05); transform: scale(1.05); -webkit-box-shadow: var(--lx-shadow-xl); box-shadow: var(--lx-shadow-xl); }
+.lx-fab:active { -webkit-transform: scale(.96); transform: scale(.96); }
+.lx-fab-sm { width: 2.5rem; height: 2.5rem; font-size: 1.1rem; }

package/css/components/file-drop.css

@@ -0,0 +1,47 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* File Drop Zone */
+/* ── File Drop Zone ── */
+.lx-file-drop {
+  display:         flex;
+  flex-direction:  column;
+  align-items:     center;
+  justify-content: center;
+  gap:             .625rem;
+  padding:         2.5rem 1.5rem;
+  border:          2px dashed var(--border-strong,#d1d5db);
+  border-radius:   var(--lx-radius-lg,16px);
+  background:      var(--bg-secondary,#f9fafb);
+  cursor:          pointer;
+  transition:      border-color .2s ease, background .2s ease;
+  text-align:      center;
+  outline:         none;
+}
+.lx-file-drop:hover,
+.lx-file-drop:focus-visible {
+  border-color: var(--lx-primary,#3b82f6);
+  background:   var(--lx-primary-subtle,#dbeafe);
+}
+.lx-file-drop.lx-drag-over {
+  border-color: var(--lx-primary,#3b82f6);
+  background:   var(--lx-primary-subtle,#dbeafe);
+  -webkit-box-shadow: 0 0 0 4px rgba(59,130,246,.15);
+  box-shadow:   0 0 0 4px rgba(59,130,246,.15);
+}
+.lx-file-drop-icon { font-size: 2rem; color: var(--lx-text-muted,#9ca3af); line-height: 1; }
+.lx-file-drop-title { font-size: var(--lx-text-sm,0.875rem); font-weight: 600; color: var(--lx-text,#111827); }
+.lx-file-drop-hint  { font-size: var(--lx-text-xs,0.75rem); color: var(--lx-text-muted,#9ca3af); }
+.lx-file-drop input[type="file"] { position: absolute; opacity: 0; width: 0; height: 0; }
+.lx-file-list { list-style: none; padding: 0; margin: .75rem 0 0; width: 100%; }
+.lx-file-list-item {
+  display:         flex;
+  align-items:     center;
+  gap:             .625rem;
+  padding:         .5rem .75rem;
+  background:      var(--bg-primary,#fff);
+  border:          1px solid var(--border-default,#e5e7eb);
+  border-radius:   var(--lx-radius,8px);
+  font-size:       var(--lx-text-sm,0.875rem);
+}
+.lx-file-list-item + .lx-file-list-item { margin-top: .375rem; }
+.lx-file-list-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--lx-text,#111827); }
+.lx-file-list-size { font-size: var(--lx-text-xs,0.75rem); color: var(--lx-text-muted,#9ca3af); white-space: nowrap; }

package/css/components/forms.css

@@ -0,0 +1,107 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Forms — Input, Textarea, Select, Checkbox, Switch, Range, Validation */
+/* ── Input / Textarea / Select ── */
+.lx-input,
+.lx-textarea,
+.lx-select {
+  display: block; width: 100%;
+  padding: var(--lx-input-padding-y) var(--lx-input-padding-x);
+  font-size: var(--lx-input-font-size); font-family: var(--font-default,-apple-system,sans-serif);
+  line-height: 1.5; color: var(--lx-text,#111827);
+  background: var(--lx-input-bg); border: var(--lx-input-border);
+  border-radius: var(--lx-input-radius); appearance: none; -webkit-appearance: none;
+  transition: border-color .1s ease, box-shadow .1s ease;
+}
+.lx-input:focus, .lx-textarea:focus, .lx-select:focus {
+  outline: none; border-color: var(--lx-primary,#3b82f6); box-shadow: var(--lx-input-focus-shadow);
+}
+.lx-input::placeholder, .lx-textarea::placeholder { color: var(--lx-text-muted,#9ca3af); }
+.lx-input:disabled, .lx-textarea:disabled, .lx-select:disabled { opacity: .55; cursor: not-allowed; background: var(--lx-bg-muted,#f3f4f6); }
+.lx-input[readonly] { background: var(--lx-bg-soft,#f9fafb); cursor: default; }
+
+.lx-input-sm, .lx-textarea-sm, .lx-select-sm { padding: .3rem .65rem;  font-size: .8rem; }
+.lx-input-lg, .lx-textarea-lg, .lx-select-lg { padding: .65rem 1rem;   font-size: 1rem; }
+
+.lx-input-success { border-color: var(--lx-success,#22c55e) !important; }
+.lx-input-success:focus { box-shadow: 0 0 0 3px rgba(34,197,94,.15); }
+.lx-input-warning { border-color: var(--lx-warning,#f59e0b) !important; }
+.lx-input-warning:focus { box-shadow: 0 0 0 3px rgba(245,158,11,.15); }
+.lx-input-error   { border-color: var(--lx-danger,#ef4444)  !important; }
+.lx-input-error:focus   { box-shadow: 0 0 0 3px rgba(239,68,68,.15); }
+
+.lx-input-color { height: 2.4rem; padding: .25rem .4rem; cursor: pointer; }
+
+.lx-textarea { resize: vertical; min-height: 6rem; }
+.lx-textarea-auto { resize: none; overflow: hidden; }
+
+/* ── Select ── */
+.lx-select {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat; background-position: right .75rem center; padding-right: 2.25rem; cursor: pointer;
+}
+.lx-select[multiple], .lx-select[size] { background-image: none; padding-right: var(--lx-input-padding-x); }
+
+/* ── Input Group ── */
+.lx-input-group { display: flex; align-items: stretch; }
+.lx-input-group .lx-input, .lx-input-group .lx-select { flex: 1; border-radius: 0; }
+.lx-input-group .lx-input:first-child, .lx-input-group .lx-select:first-child { border-radius: var(--lx-input-radius,8px) 0 0 var(--lx-input-radius,8px); }
+.lx-input-group .lx-input:last-child,  .lx-input-group .lx-select:last-child  { border-radius: 0 var(--lx-input-radius,8px) var(--lx-input-radius,8px) 0; }
+.lx-input-group .lx-input:focus, .lx-input-group .lx-select:focus { z-index: 2; }
+.lx-input-addon {
+  display: flex; align-items: center;
+  padding: var(--lx-input-padding-y) var(--lx-input-padding-x);
+  font-size: var(--lx-input-font-size); font-weight: 500;
+  color: var(--lx-text-secondary,#6b7280); background: var(--lx-bg-muted,#f3f4f6);
+  border: var(--lx-input-border); white-space: nowrap;
+}
+.lx-input-group .lx-input-addon:first-child { border-radius: var(--lx-input-radius,8px) 0 0 var(--lx-input-radius,8px); border-right: none; }
+.lx-input-group .lx-input-addon:last-child  { border-radius: 0 var(--lx-input-radius,8px) var(--lx-input-radius,8px) 0; border-left: none; }
+.lx-input-group .lx-btn:first-child { border-radius: var(--lx-input-radius,8px) 0 0 var(--lx-input-radius,8px); }
+.lx-input-group .lx-btn:last-child  { border-radius: 0 var(--lx-input-radius,8px) var(--lx-input-radius,8px) 0; }
+
+/* ── Floating Label ── */
+.lx-form-floating { position: relative; }
+.lx-form-floating .lx-input, .lx-form-floating .lx-select, .lx-form-floating .lx-textarea { padding-top: 1.5rem; padding-bottom: .5rem; height: 3.25rem; }
+.lx-form-floating .lx-textarea { height: auto; padding-top: 1.75rem; }
+.lx-form-floating label { position: absolute; top: .875rem; inset-inline-start: var(--lx-input-padding-x,0.75rem); color: var(--lx-text-muted,#9ca3af); font-size: var(--lx-text-sm,0.875rem); font-weight: 400; pointer-events: none; transform-origin: 0 0; transition: transform .1s ease, font-size .1s ease, top .1s ease; }
+.lx-form-floating .lx-input:focus ~ label, .lx-form-floating .lx-input:not(:placeholder-shown) ~ label,
+.lx-form-floating .lx-textarea:focus ~ label, .lx-form-floating .lx-textarea:not(:placeholder-shown) ~ label,
+.lx-form-floating .lx-select:focus ~ label, .lx-form-floating .lx-select:not(:placeholder-shown) ~ label { top: .375rem; font-size: .7rem; font-weight: 600; color: var(--lx-primary,#3b82f6); }
+
+/* ── Checkbox ── */
+.lx-checkbox, .lx-radio { display: inline-flex; align-items: flex-start; gap: .5rem; cursor: pointer; font-size: var(--lx-text-sm,0.875rem); color: var(--lx-text-secondary,#6b7280); user-select: none; line-height: 1.5; }
+.lx-checkbox input[type="checkbox"], .lx-radio input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
+.lx-checkbox-mark { display: flex; align-items: center; justify-content: center; width: 1.125rem; height: 1.125rem; border: 1.5px solid var(--border-strong,#d1d5db); border-radius: var(--lx-radius-sm,4px); background: var(--lx-bg,#fff); flex-shrink: 0; margin-top: .125rem; transition: var(--lx-transition); }
+.lx-checkbox input:checked ~ .lx-checkbox-mark { background: var(--lx-primary,#3b82f6); border-color: var(--lx-primary,#3b82f6); }
+.lx-checkbox input:checked ~ .lx-checkbox-mark::after { content: ""; width: .3rem; height: .55rem; border-right: 2px solid white; border-bottom: 2px solid white; transform: rotate(45deg) translate(-.05rem, -.1rem); }
+.lx-checkbox input:disabled ~ .lx-checkbox-mark { opacity: .5; cursor: not-allowed; }
+.lx-radio-mark { width: 1.125rem; height: 1.125rem; border: 1.5px solid var(--border-strong,#d1d5db); border-radius: 50%; background: var(--lx-bg,#fff); flex-shrink: 0; margin-top: .125rem; display: flex; align-items: center; justify-content: center; transition: var(--lx-transition); }
+.lx-radio input:checked ~ .lx-radio-mark { border-color: var(--lx-primary,#3b82f6); }
+.lx-radio input:checked ~ .lx-radio-mark::after { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--lx-primary,#3b82f6); }
+
+/* ── Switch ── */
+.lx-switch { display: inline-flex; align-items: center; gap: .625rem; cursor: pointer; font-size: var(--lx-text-sm,0.875rem); color: var(--lx-text-secondary,#6b7280); user-select: none; }
+.lx-switch input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
+.lx-switch-thumb { position: relative; width: 2.25rem; height: 1.25rem; background: var(--lx-gray-300,#d1d5db); border-radius: var(--lx-radius-full,9999px); flex-shrink: 0; transition: background .2s ease; }
+.lx-switch-thumb::before { content: ""; position: absolute; top: .1875rem; inset-inline-start: .1875rem; width: .875rem; height: .875rem; border-radius: 50%; background: white; box-shadow: var(--lx-shadow-sm); transition: transform .2s ease; }
+.lx-switch input:checked ~ .lx-switch-thumb { background: var(--lx-primary,#3b82f6); }
+.lx-switch input:checked ~ .lx-switch-thumb::before { transform: translateX(1rem); }
+.lx-switch-success input:checked ~ .lx-switch-thumb { background: var(--lx-success,#22c55e); }
+.lx-switch-danger  input:checked ~ .lx-switch-thumb { background: var(--lx-danger,#ef4444); }
+.lx-switch-warning input:checked ~ .lx-switch-thumb { background: var(--lx-warning,#f59e0b); }
+.lx-switch input:disabled ~ .lx-switch-thumb { opacity: .5; cursor: not-allowed; }
+
+/* ── Range ── */
+.lx-range { width: 100%; height: .375rem; appearance: none; -webkit-appearance: none; background: var(--border-default,#e5e7eb); border-radius: var(--lx-radius-full,9999px); cursor: pointer; outline: none; }
+.lx-range::-webkit-slider-thumb { appearance: none; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--lx-primary,#3b82f6); border: 2px solid white; box-shadow: var(--lx-shadow-sm); transition: transform .1s ease; }
+.lx-range::-webkit-slider-thumb:hover { transform: scale(1.1); }
+.lx-range::-moz-range-thumb { width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--lx-primary,#3b82f6); border: 2px solid white; cursor: pointer; }
+.lx-range:disabled { opacity: .55; cursor: not-allowed; }
+
+/* ── Validation ── */
+.lx-valid-feedback   { display: none; font-size: var(--lx-text-xs,0.75rem); color: var(--lx-success-hover,#16a34a); margin-top: .3rem; }
+.lx-invalid-feedback { display: none; font-size: var(--lx-text-xs,0.75rem); color: var(--lx-danger-hover,#dc2626);  margin-top: .3rem; }
+.lx-was-validated .lx-input:valid   ~ .lx-valid-feedback,
+.lx-was-validated .lx-input:invalid ~ .lx-invalid-feedback { display: block; }
+.lx-was-validated .lx-input:valid   { border-color: var(--lx-success,#22c55e); }
+.lx-was-validated .lx-input:invalid { border-color: var(--lx-danger,#ef4444); }

package/css/components/kbd.css

@@ -0,0 +1,5 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Kbd Enhanced */
+/* ── Kbd Enhanced ── */
+.lx-shortcut { display: inline-flex; align-items: center; gap: .25rem; }
+.lx-shortcut kbd { font-family: var(--font-mono,"SFMono-Regular",Consolas,monospace); }