@lancar/lxui 1.0.0

package/css/index.css

@@ -0,0 +1,59 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* LxUI — full bundle via @import */
+
+/* Base */
+@import '../css/base/reset.css';
+@import '../css/base/tokens.css';
+@import '../css/base/tokens-extended.css';
+@import '../css/base/typography.css';
+@import '../css/base/utils.css';
+
+/* Layout */
+@import '../css/layout/grid.css';
+@import '../css/layout/utilities.css';
+
+/* Components */
+@import '../css/components/accordion.css';
+@import '../css/components/alert.css';
+@import '../css/components/animations.css';
+@import '../css/components/avatar.css';
+@import '../css/components/back-top.css';
+@import '../css/components/badge.css';
+@import '../css/components/breadcrumb.css';
+@import '../css/components/button.css';
+@import '../css/components/callout.css';
+@import '../css/components/card.css';
+@import '../css/components/carousel.css';
+@import '../css/components/chip.css';
+@import '../css/components/code-block.css';
+@import '../css/components/collapse.css';
+@import '../css/components/compat.css';
+@import '../css/components/dark-mode.css';
+@import '../css/components/divider.css';
+@import '../css/components/dropdown.css';
+@import '../css/components/empty.css';
+@import '../css/components/fab.css';
+@import '../css/components/file-drop.css';
+@import '../css/components/forms.css';
+@import '../css/components/kbd.css';
+@import '../css/components/list-group.css';
+@import '../css/components/modal.css';
+@import '../css/components/nav.css';
+@import '../css/components/navbar.css';
+@import '../css/components/number-input.css';
+@import '../css/components/offcanvas.css';
+@import '../css/components/pagination.css';
+@import '../css/components/popover.css';
+@import '../css/components/progress.css';
+@import '../css/components/rating.css';
+@import '../css/components/section.css';
+@import '../css/components/skeleton.css';
+@import '../css/components/spinner.css';
+@import '../css/components/stat.css';
+@import '../css/components/steps.css';
+@import '../css/components/table.css';
+@import '../css/components/tag.css';
+@import '../css/components/timeline.css';
+@import '../css/components/toast.css';
+@import '../css/components/toggler.css';
+@import '../css/components/tooltip.css';

package/css/layout/grid.css

@@ -0,0 +1,71 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* grid */
+* LxUI — lx-grid.min.css
+ * Grid system only (12-column CSS Grid)
+ * https://ui.lancar.id | cdn: https://cdn.lancar.id/ui/lx-grid.min.css
+ * ================================================================ */
+:root{--lx-gap:1rem;--lx-container-padding-x:1rem;--lx-grid-cols:12}
+.lx-container{width:100%;margin-inline:auto;padding-inline:var(--lx-container-padding-x)}
+.lx-container-fluid{width:100%;padding-inline:var(--lx-container-padding-x)}
+.lx-container-sm{max-width:640px;margin-inline:auto;padding-inline:var(--lx-container-padding-x)}
+.lx-container-md{max-width:768px;margin-inline:auto;padding-inline:var(--lx-container-padding-x)}
+.lx-container-lg{max-width:1024px;margin-inline:auto;padding-inline:var(--lx-container-padding-x)}
+.lx-container-xl{max-width:1280px;margin-inline:auto;padding-inline:var(--lx-container-padding-x)}
+.lx-container-2xl{max-width:1536px;margin-inline:auto;padding-inline:var(--lx-container-padding-x)}
+@media(min-width:640px){.lx-container{max-width:640px}}
+@media(min-width:768px){.lx-container{max-width:768px}:root{--lx-container-padding-x:1.5rem}}
+@media(min-width:1024px){.lx-container{max-width:1024px}}
+@media(min-width:1280px){.lx-container{max-width:1280px}}
+@media(min-width:1536px){.lx-container{max-width:1536px}}
+.lx-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--lx-gap)}
+.lx-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
+.lx-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
+.lx-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
+.lx-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
+.lx-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
+.lx-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
+.lx-cols-auto{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
+.lx-col-1{grid-column:span 1/span 1}
+.lx-col-2{grid-column:span 2/span 2}
+.lx-col-3{grid-column:span 3/span 3}
+.lx-col-4{grid-column:span 4/span 4}
+.lx-col-5{grid-column:span 5/span 5}
+.lx-col-6{grid-column:span 6/span 6}
+.lx-col-7{grid-column:span 7/span 7}
+.lx-col-8{grid-column:span 8/span 8}
+.lx-col-9{grid-column:span 9/span 9}
+.lx-col-10{grid-column:span 10/span 10}
+.lx-col-11{grid-column:span 11/span 11}
+.lx-col-12{grid-column:span 12/span 12}
+.lx-col-offset-1{margin-inline-start:calc(100%/12*1)}
+.lx-col-offset-2{margin-inline-start:calc(100%/12*2)}
+.lx-col-offset-3{margin-inline-start:calc(100%/12*3)}
+.lx-col-offset-4{margin-inline-start:calc(100%/12*4)}
+.lx-col-offset-5{margin-inline-start:calc(100%/12*5)}
+.lx-col-offset-6{margin-inline-start:calc(100%/12*6)}
+.lx-order-first{order:-9999}.lx-order-last{order:9999}
+.lx-order-1{order:1}.lx-order-2{order:2}.lx-order-3{order:3}
+.lx-order-4{order:4}.lx-order-5{order:5}.lx-order-6{order:6}
+.lx-gap-0{gap:0}.lx-gap-1{gap:.25rem}.lx-gap-2{gap:.5rem}
+.lx-gap-3{gap:.75rem}.lx-gap-4{gap:1rem}.lx-gap-5{gap:1.25rem}
+.lx-gap-6{gap:1.5rem}.lx-gap-8{gap:2rem}.lx-gap-10{gap:2.5rem}.lx-gap-12{gap:3rem}
+.lx-gap-x-0{column-gap:0}.lx-gap-x-2{column-gap:.5rem}.lx-gap-x-4{column-gap:1rem}.lx-gap-x-6{column-gap:1.5rem}.lx-gap-x-8{column-gap:2rem}
+.lx-gap-y-0{row-gap:0}.lx-gap-y-2{row-gap:.5rem}.lx-gap-y-4{row-gap:1rem}.lx-gap-y-6{row-gap:1.5rem}.lx-gap-y-8{row-gap:2rem}
+@media(min-width:640px){
+.lx-sm-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.lx-sm-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lx-sm-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lx-sm-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
+.lx-sm-col-1{grid-column:span 1/span 1}.lx-sm-col-2{grid-column:span 2/span 2}.lx-sm-col-3{grid-column:span 3/span 3}.lx-sm-col-4{grid-column:span 4/span 4}.lx-sm-col-6{grid-column:span 6/span 6}.lx-sm-col-12{grid-column:span 12/span 12}
+.lx-sm-gap-2{gap:.5rem}.lx-sm-gap-4{gap:1rem}.lx-sm-gap-6{gap:1.5rem}}
+@media(min-width:768px){
+.lx-md-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.lx-md-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lx-md-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lx-md-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lx-md-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
+.lx-md-col-1{grid-column:span 1/span 1}.lx-md-col-2{grid-column:span 2/span 2}.lx-md-col-3{grid-column:span 3/span 3}.lx-md-col-4{grid-column:span 4/span 4}.lx-md-col-5{grid-column:span 5/span 5}.lx-md-col-6{grid-column:span 6/span 6}.lx-md-col-7{grid-column:span 7/span 7}.lx-md-col-8{grid-column:span 8/span 8}.lx-md-col-9{grid-column:span 9/span 9}.lx-md-col-10{grid-column:span 10/span 10}.lx-md-col-12{grid-column:span 12/span 12}
+.lx-md-col-offset-3{margin-inline-start:25%}.lx-md-col-offset-4{margin-inline-start:33.333%}
+.lx-md-gap-2{gap:.5rem}.lx-md-gap-4{gap:1rem}.lx-md-gap-6{gap:1.5rem}.lx-md-gap-8{gap:2rem}}
+@media(min-width:1024px){
+.lx-lg-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.lx-lg-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lx-lg-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lx-lg-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lx-lg-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lx-lg-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
+.lx-lg-col-1{grid-column:span 1/span 1}.lx-lg-col-2{grid-column:span 2/span 2}.lx-lg-col-3{grid-column:span 3/span 3}.lx-lg-col-4{grid-column:span 4/span 4}.lx-lg-col-5{grid-column:span 5/span 5}.lx-lg-col-6{grid-column:span 6/span 6}.lx-lg-col-8{grid-column:span 8/span 8}.lx-lg-col-9{grid-column:span 9/span 9}.lx-lg-col-12{grid-column:span 12/span 12}
+.lx-lg-gap-4{gap:1rem}.lx-lg-gap-6{gap:1.5rem}.lx-lg-gap-8{gap:2rem}}
+@media(min-width:1280px){
+.lx-xl-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lx-xl-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lx-xl-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
+.lx-xl-col-3{grid-column:span 3/span 3}.lx-xl-col-4{grid-column:span 4/span 4}.lx-xl-col-6{grid-column:span 6/span 6}}
+
+/* ================================================================

package/css/layout/utilities.css

@@ -0,0 +1,257 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* utilities */
+* LxUI — lx-utilities.min.css
+ * Utility classes only (display, spacing, flex, text, color, etc.)
+ * https://ui.lancar.id | cdn: https://cdn.lancar.id/ui/lx-utilities.min.css
+ * ================================================================ */
+
+/* Display */
+.lx-block{display:block}.lx-inline{display:inline}.lx-inline-block{display:inline-block}
+.lx-flex{display:flex}.lx-inline-flex{display:inline-flex}.lx-grid{display:grid}.lx-inline-grid{display:inline-grid}
+.lx-table{display:table}.lx-table-row{display:table-row}.lx-table-cell{display:table-cell}
+.lx-contents{display:contents}.lx-hidden{display:none}
+@media print{.lx-print-hidden{display:none!important}.lx-print-block{display:block!important}}
+
+/* Flex */
+.lx-flex-row{flex-direction:row}.lx-flex-row-reverse{flex-direction:row-reverse}
+.lx-flex-col{flex-direction:column}.lx-flex-col-reverse{flex-direction:column-reverse}
+.lx-flex-wrap{flex-wrap:wrap}.lx-flex-nowrap{flex-wrap:nowrap}.lx-flex-wrap-reverse{flex-wrap:wrap-reverse}
+.lx-justify-start{justify-content:flex-start}.lx-justify-end{justify-content:flex-end}
+.lx-justify-center{justify-content:center}.lx-justify-between{justify-content:space-between}
+.lx-justify-around{justify-content:space-around}.lx-justify-evenly{justify-content:space-evenly}
+.lx-items-start{align-items:flex-start}.lx-items-end{align-items:flex-end}
+.lx-items-center{align-items:center}.lx-items-baseline{align-items:baseline}.lx-items-stretch{align-items:stretch}
+.lx-self-start{align-self:flex-start}.lx-self-end{align-self:flex-end}
+.lx-self-center{align-self:center}.lx-self-stretch{align-self:stretch}.lx-self-auto{align-self:auto}
+.lx-content-start{align-content:flex-start}.lx-content-end{align-content:flex-end}
+.lx-content-center{align-content:center}.lx-content-between{align-content:space-between}
+.lx-flex-1{flex:1 1 0%}.lx-flex-auto{flex:1 1 auto}.lx-flex-none{flex:none}
+.lx-flex-shrink-0{flex-shrink:0}.lx-flex-shrink{flex-shrink:1}
+.lx-grow{flex-grow:1}.lx-grow-0{flex-grow:0}
+
+/* Stack layouts */
+.lx-stack>*+*{margin-block-start:var(--lx-stack-gap,1rem)}
+.lx-hstack{display:flex;align-items:center}
+
+/* Spacing — Margin */
+.lx-m-0{margin:0}.lx-m-1{margin:.25rem}.lx-m-2{margin:.5rem}.lx-m-3{margin:.75rem}
+.lx-m-4{margin:1rem}.lx-m-5{margin:1.25rem}.lx-m-6{margin:1.5rem}.lx-m-8{margin:2rem}
+.lx-m-10{margin:2.5rem}.lx-m-12{margin:3rem}.lx-m-16{margin:4rem}.lx-m-auto{margin:auto}
+.lx-mt-0{margin-top:0}.lx-mt-1{margin-top:.25rem}.lx-mt-2{margin-top:.5rem}.lx-mt-3{margin-top:.75rem}.lx-mt-4{margin-top:1rem}.lx-mt-5{margin-top:1.25rem}.lx-mt-6{margin-top:1.5rem}.lx-mt-8{margin-top:2rem}.lx-mt-10{margin-top:2.5rem}.lx-mt-12{margin-top:3rem}.lx-mt-16{margin-top:4rem}.lx-mt-auto{margin-top:auto}
+.lx-mb-0{margin-bottom:0}.lx-mb-1{margin-bottom:.25rem}.lx-mb-2{margin-bottom:.5rem}.lx-mb-3{margin-bottom:.75rem}.lx-mb-4{margin-bottom:1rem}.lx-mb-5{margin-bottom:1.25rem}.lx-mb-6{margin-bottom:1.5rem}.lx-mb-8{margin-bottom:2rem}.lx-mb-10{margin-bottom:2.5rem}.lx-mb-12{margin-bottom:3rem}.lx-mb-16{margin-bottom:4rem}.lx-mb-auto{margin-bottom:auto}
+.lx-ms-0{margin-inline-start:0}.lx-ms-1{margin-inline-start:.25rem}.lx-ms-2{margin-inline-start:.5rem}.lx-ms-3{margin-inline-start:.75rem}.lx-ms-4{margin-inline-start:1rem}.lx-ms-5{margin-inline-start:1.25rem}.lx-ms-6{margin-inline-start:1.5rem}.lx-ms-8{margin-inline-start:2rem}.lx-ms-auto{margin-inline-start:auto}
+.lx-me-0{margin-inline-end:0}.lx-me-1{margin-inline-end:.25rem}.lx-me-2{margin-inline-end:.5rem}.lx-me-3{margin-inline-end:.75rem}.lx-me-4{margin-inline-end:1rem}.lx-me-5{margin-inline-end:1.25rem}.lx-me-6{margin-inline-end:1.5rem}.lx-me-8{margin-inline-end:2rem}.lx-me-auto{margin-inline-end:auto}
+.lx-mx-0{margin-inline:0}.lx-mx-1{margin-inline:.25rem}.lx-mx-2{margin-inline:.5rem}.lx-mx-3{margin-inline:.75rem}.lx-mx-4{margin-inline:1rem}.lx-mx-6{margin-inline:1.5rem}.lx-mx-8{margin-inline:2rem}.lx-mx-auto{margin-inline:auto}
+.lx-my-0{margin-block:0}.lx-my-1{margin-block:.25rem}.lx-my-2{margin-block:.5rem}.lx-my-3{margin-block:.75rem}.lx-my-4{margin-block:1rem}.lx-my-6{margin-block:1.5rem}.lx-my-8{margin-block:2rem}.lx-my-auto{margin-block:auto}
+
+/* Spacing — Padding */
+.lx-p-0{padding:0}.lx-p-1{padding:.25rem}.lx-p-2{padding:.5rem}.lx-p-3{padding:.75rem}
+.lx-p-4{padding:1rem}.lx-p-5{padding:1.25rem}.lx-p-6{padding:1.5rem}.lx-p-8{padding:2rem}
+.lx-p-10{padding:2.5rem}.lx-p-12{padding:3rem}.lx-p-16{padding:4rem}
+.lx-pt-0{padding-top:0}.lx-pt-1{padding-top:.25rem}.lx-pt-2{padding-top:.5rem}.lx-pt-3{padding-top:.75rem}.lx-pt-4{padding-top:1rem}.lx-pt-6{padding-top:1.5rem}.lx-pt-8{padding-top:2rem}.lx-pt-12{padding-top:3rem}.lx-pt-16{padding-top:4rem}
+.lx-pb-0{padding-bottom:0}.lx-pb-1{padding-bottom:.25rem}.lx-pb-2{padding-bottom:.5rem}.lx-pb-3{padding-bottom:.75rem}.lx-pb-4{padding-bottom:1rem}.lx-pb-6{padding-bottom:1.5rem}.lx-pb-8{padding-bottom:2rem}.lx-pb-12{padding-bottom:3rem}.lx-pb-16{padding-bottom:4rem}
+.lx-ps-0{padding-inline-start:0}.lx-ps-1{padding-inline-start:.25rem}.lx-ps-2{padding-inline-start:.5rem}.lx-ps-3{padding-inline-start:.75rem}.lx-ps-4{padding-inline-start:1rem}.lx-ps-5{padding-inline-start:1.25rem}.lx-ps-6{padding-inline-start:1.5rem}.lx-ps-8{padding-inline-start:2rem}
+.lx-pe-0{padding-inline-end:0}.lx-pe-1{padding-inline-end:.25rem}.lx-pe-2{padding-inline-end:.5rem}.lx-pe-3{padding-inline-end:.75rem}.lx-pe-4{padding-inline-end:1rem}.lx-pe-5{padding-inline-end:1.25rem}.lx-pe-6{padding-inline-end:1.5rem}.lx-pe-8{padding-inline-end:2rem}
+.lx-px-0{padding-inline:0}.lx-px-1{padding-inline:.25rem}.lx-px-2{padding-inline:.5rem}.lx-px-3{padding-inline:.75rem}.lx-px-4{padding-inline:1rem}.lx-px-5{padding-inline:1.25rem}.lx-px-6{padding-inline:1.5rem}.lx-px-8{padding-inline:2rem}
+.lx-py-0{padding-block:0}.lx-py-1{padding-block:.25rem}.lx-py-2{padding-block:.5rem}.lx-py-3{padding-block:.75rem}.lx-py-4{padding-block:1rem}.lx-py-5{padding-block:1.25rem}.lx-py-6{padding-block:1.5rem}.lx-py-8{padding-block:2rem}
+
+/* Text */
+.lx-text-xs{font-size:.75rem}.lx-text-sm{font-size:.875rem}.lx-text-base{font-size:1rem}
+.lx-text-lg{font-size:1.125rem}.lx-text-xl{font-size:1.25rem}.lx-text-2xl{font-size:1.5rem}
+.lx-text-3xl{font-size:1.875rem}.lx-text-4xl{font-size:2.25rem}.lx-text-5xl{font-size:3rem}
+.lx-text-left{text-align:left}.lx-text-center{text-align:center}.lx-text-right{text-align:right}
+.lx-text-justify{text-align:justify}.lx-text-start{text-align:start}.lx-text-end{text-align:end}
+.lx-font-thin{font-weight:100}.lx-font-extralight{font-weight:200}.lx-font-light{font-weight:300}
+.lx-font-normal{font-weight:400}.lx-font-medium{font-weight:500}.lx-font-semibold{font-weight:600}
+.lx-font-bold{font-weight:700}.lx-font-extrabold{font-weight:800}.lx-font-black{font-weight:900}
+.lx-italic{font-style:italic}.lx-not-italic{font-style:normal}
+.lx-uppercase{text-transform:uppercase}.lx-lowercase{text-transform:lowercase}
+.lx-capitalize{text-transform:capitalize}.lx-normal-case{text-transform:none}
+.lx-underline{text-decoration-line:underline}.lx-overline{text-decoration-line:overline}
+.lx-line-through{text-decoration-line:line-through}.lx-no-underline{text-decoration:none}
+.lx-tracking-tighter{letter-spacing:-.05em}.lx-tracking-tight{letter-spacing:-.025em}
+.lx-tracking-normal{letter-spacing:0}.lx-tracking-wide{letter-spacing:.025em}
+.lx-tracking-wider{letter-spacing:.05em}.lx-tracking-widest{letter-spacing:.1em}
+.lx-leading-none{line-height:1}.lx-leading-tight{line-height:1.25}.lx-leading-snug{line-height:1.375}
+.lx-leading-normal{line-height:1.6}.lx-leading-relaxed{line-height:1.75}.lx-leading-loose{line-height:2}
+.lx-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.lx-text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.lx-line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}
+.lx-line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
+.lx-line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}
+.lx-line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}
+.lx-whitespace-nowrap{white-space:nowrap}.lx-whitespace-pre{white-space:pre}
+.lx-whitespace-pre-wrap{white-space:pre-wrap}.lx-whitespace-normal{white-space:normal}
+.lx-break-all{word-break:break-all}.lx-break-words{overflow-wrap:break-word}
+.lx-word-break{word-break:break-all}
+
+/* Colors */
+.lx-text-primary{color:var(--lx-primary,#3b82f6)}.lx-text-secondary{color:var(--lx-secondary,#6b7280)}
+.lx-text-success{color:var(--lx-success,#22c55e)}.lx-text-warning{color:var(--lx-warning,#f59e0b)}
+.lx-text-danger{color:var(--lx-danger,#ef4444)}.lx-text-info{color:var(--lx-info,#06b6d4)}
+.lx-text-dark{color:var(--lx-dark,#1f2937)}.lx-text-light{color:var(--lx-light,#f9fafb)}
+.lx-text-white{color:#fff}.lx-text-black{color:#000}
+.lx-text-muted{color:var(--text-muted,#9ca3af)}.lx-text-body{color:var(--text-primary,#111827)}
+.lx-text-opacity-75{opacity:.75}.lx-text-opacity-50{opacity:.5}.lx-text-opacity-25{opacity:.25}
+.lx-bg-primary{background-color:var(--lx-primary,#3b82f6)}.lx-bg-secondary{background-color:var(--lx-secondary,#6b7280)}
+.lx-bg-success{background-color:var(--lx-success,#22c55e)}.lx-bg-warning{background-color:var(--lx-warning,#f59e0b)}
+.lx-bg-danger{background-color:var(--lx-danger,#ef4444)}.lx-bg-info{background-color:var(--lx-info,#06b6d4)}
+.lx-bg-dark{background-color:var(--lx-dark,#1f2937)}.lx-bg-light{background-color:var(--lx-light,#f9fafb)}
+.lx-bg-white{background-color:#fff}.lx-bg-transparent{background-color:transparent}
+.lx-bg-primary-soft{background-color:color-mix(in srgb,var(--lx-primary,#3b82f6) 12%,white)}
+.lx-bg-success-soft{background-color:color-mix(in srgb,var(--lx-success,#22c55e) 12%,white)}
+.lx-bg-warning-soft{background-color:color-mix(in srgb,var(--lx-warning,#f59e0b) 12%,white)}
+.lx-bg-danger-soft{background-color:color-mix(in srgb,var(--lx-danger,#ef4444) 12%,white)}
+.lx-bg-opacity-75{opacity:.75}.lx-bg-opacity-50{opacity:.5}.lx-bg-opacity-25{opacity:.25}.lx-bg-opacity-10{opacity:.1}
+
+/* Sizing */
+.lx-w-auto{width:auto}.lx-w-full{width:100%}.lx-w-screen{width:100vw}.lx-w-fit{width:fit-content}
+.lx-w-1\/2{width:50%}.lx-w-1\/3{width:33.333%}.lx-w-2\/3{width:66.666%}
+.lx-w-1\/4{width:25%}.lx-w-3\/4{width:75%}.lx-w-1\/5{width:20%}.lx-w-4\/5{width:80%}
+.lx-w-4{width:1rem}.lx-w-6{width:1.5rem}.lx-w-8{width:2rem}.lx-w-12{width:3rem}.lx-w-16{width:4rem}.lx-w-24{width:6rem}.lx-w-32{width:8rem}.lx-w-48{width:12rem}.lx-w-64{width:16rem}
+.lx-h-auto{height:auto}.lx-h-full{height:100%}.lx-h-screen{height:100vh}.lx-h-fit{height:fit-content}
+.lx-h-4{height:1rem}.lx-h-6{height:1.5rem}.lx-h-8{height:2rem}.lx-h-12{height:3rem}.lx-h-16{height:4rem}.lx-h-24{height:6rem}.lx-h-32{height:8rem}
+.lx-min-w-0{min-width:0}.lx-max-w-full{max-width:100%}.lx-max-w-screen-sm{max-width:640px}.lx-max-w-screen-md{max-width:768px}.lx-max-w-screen-lg{max-width:1024px}.lx-max-w-screen-xl{max-width:1280px}
+.lx-min-h-screen{min-height:100vh}.lx-max-h-screen{max-height:100vh}.lx-max-h-64{max-height:16rem}
+.lx-size-4{width:1rem;height:1rem}.lx-size-6{width:1.5rem;height:1.5rem}.lx-size-8{width:2rem;height:2rem}.lx-size-12{width:3rem;height:3rem}.lx-size-16{width:4rem;height:4rem}
+
+/* Position */
+.lx-static{position:static}.lx-relative{position:relative}.lx-absolute{position:absolute}
+.lx-fixed{position:fixed}.lx-sticky{position:sticky}
+.lx-top-0{top:0}.lx-top-50{top:50%}.lx-top-100{top:100%}.lx-top-auto{top:auto}
+.lx-bottom-0{bottom:0}.lx-bottom-50{bottom:50%}.lx-bottom-auto{bottom:auto}
+.lx-start-0{inset-inline-start:0}.lx-start-50{inset-inline-start:50%}.lx-start-auto{inset-inline-start:auto}
+.lx-end-0{inset-inline-end:0}.lx-end-50{inset-inline-end:50%}.lx-end-auto{inset-inline-end:auto}
+.lx-inset-0{inset:0}
+.lx-translate-middle{transform:translate(-50%,-50%)}
+.lx-translate-middle-x{transform:translateX(-50%)}
+.lx-translate-middle-y{transform:translateY(-50%)}
+.lx-sticky-top{position:sticky;top:0;z-index:var(--lx-z-sticky,1020)}
+
+/* Border */
+.lx-border{border:1px solid var(--border-default,#e5e7eb)}
+.lx-border-0{border:0!important}.lx-border-2{border-width:2px}.lx-border-3{border-width:3px}
+.lx-border-t{border-top:1px solid var(--border-default,#e5e7eb)}
+.lx-border-b{border-bottom:1px solid var(--border-default,#e5e7eb)}
+.lx-border-s{border-inline-start:1px solid var(--border-default,#e5e7eb)}
+.lx-border-e{border-inline-end:1px solid var(--border-default,#e5e7eb)}
+.lx-border-t-0{border-top:0}.lx-border-b-0{border-bottom:0}
+.lx-border-primary{border-color:var(--lx-primary,#3b82f6)!important}
+.lx-border-success{border-color:var(--lx-success,#22c55e)!important}
+.lx-border-danger{border-color:var(--lx-danger,#ef4444)!important}
+.lx-border-warning{border-color:var(--lx-warning,#f59e0b)!important}
+.lx-border-white{border-color:#fff!important}
+.lx-border-opacity-50{border-color:color-mix(in srgb,currentColor 50%,transparent)!important}
+.lx-rounded-none{border-radius:0}.lx-rounded-sm{border-radius:4px}.lx-rounded{border-radius:8px}
+.lx-rounded-md{border-radius:12px}.lx-rounded-lg{border-radius:16px}.lx-rounded-xl{border-radius:24px}
+.lx-rounded-2xl{border-radius:32px}.lx-rounded-full{border-radius:9999px}
+.lx-rounded-t{border-top-left-radius:8px;border-top-right-radius:8px}
+.lx-rounded-b{border-bottom-left-radius:8px;border-bottom-right-radius:8px}
+.lx-rounded-s{border-top-left-radius:8px;border-bottom-left-radius:8px}
+.lx-rounded-e{border-top-right-radius:8px;border-bottom-right-radius:8px}
+
+/* Shadow */
+.lx-shadow-none{box-shadow:none!important}
+.lx-shadow-xs{box-shadow:0 1px 2px rgba(0,0,0,.04)}
+.lx-shadow-sm{box-shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04)}
+.lx-shadow{box-shadow:0 4px 6px -1px rgba(0,0,0,.07),0 2px 4px -2px rgba(0,0,0,.05)}
+.lx-shadow-md{box-shadow:0 8px 12px -3px rgba(0,0,0,.08),0 4px 6px -4px rgba(0,0,0,.05)}
+.lx-shadow-lg{box-shadow:0 16px 24px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.05)}
+.lx-shadow-xl{box-shadow:0 24px 40px -8px rgba(0,0,0,.12),0 12px 16px -8px rgba(0,0,0,.06)}
+.lx-shadow-2xl{box-shadow:0 40px 60px -12px rgba(0,0,0,.18)}
+.lx-shadow-inner{box-shadow:inset 0 2px 4px rgba(0,0,0,.06)}
+
+/* Overflow */
+.lx-overflow-auto{overflow:auto}.lx-overflow-hidden{overflow:hidden}
+.lx-overflow-visible{overflow:visible}.lx-overflow-scroll{overflow:scroll}
+.lx-overflow-x-auto{overflow-x:auto}.lx-overflow-y-auto{overflow-y:auto}
+.lx-overflow-x-hidden{overflow-x:hidden}.lx-overflow-y-hidden{overflow-y:hidden}
+.lx-overflow-x-scroll{overflow-x:scroll}.lx-overflow-y-scroll{overflow-y:scroll}
+
+/* Visibility */
+.lx-visible{visibility:visible}.lx-invisible{visibility:hidden}
+.lx-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
+.lx-sr-only-focusable:focus,.lx-sr-only-focusable:focus-within{position:static;width:auto;height:auto;padding:inherit;margin:inherit;overflow:visible;clip:auto;white-space:normal}
+
+/* Interactions */
+.lx-pointer-events-none{pointer-events:none}.lx-pointer-events-auto{pointer-events:auto}
+.lx-select-none{user-select:none}.lx-select-all{user-select:all}.lx-select-text{user-select:text}
+.lx-cursor-pointer{cursor:pointer}.lx-cursor-default{cursor:default}.lx-cursor-auto{cursor:auto}
+.lx-cursor-not-allowed{cursor:not-allowed}.lx-cursor-wait{cursor:wait}
+.lx-cursor-move{cursor:move}.lx-cursor-grab{cursor:grab}.lx-cursor-text{cursor:text}
+
+/* Float */
+.lx-float-start{float:inline-start}.lx-float-end{float:inline-end}.lx-float-none{float:none}
+.lx-clearfix::after{content:"";display:table;clear:both}
+
+/* Vertical align */
+.lx-align-baseline{vertical-align:baseline}.lx-align-top{vertical-align:top}
+.lx-align-middle{vertical-align:middle}.lx-align-bottom{vertical-align:bottom}
+.lx-align-text-top{vertical-align:text-top}.lx-align-text-bottom{vertical-align:text-bottom}
+.lx-align-sub{vertical-align:sub}.lx-align-super{vertical-align:super}
+
+/* Object fit */
+.lx-object-cover{object-fit:cover}.lx-object-contain{object-fit:contain}
+.lx-object-fill{object-fit:fill}.lx-object-none{object-fit:none}
+.lx-object-center{object-position:center}.lx-object-top{object-position:top}
+
+/* Opacity */
+.lx-opacity-0{opacity:0}.lx-opacity-25{opacity:.25}.lx-opacity-50{opacity:.5}
+.lx-opacity-75{opacity:.75}.lx-opacity-100{opacity:1}
+
+/* Text opacity helpers */
+.lx-text-opacity-75{color:color-mix(in srgb,currentColor 75%,transparent)!important}
+.lx-text-opacity-50{color:color-mix(in srgb,currentColor 50%,transparent)!important}
+.lx-text-opacity-25{color:color-mix(in srgb,currentColor 25%,transparent)!important}
+.lx-text-opacity-80{color:color-mix(in srgb,currentColor 80%,transparent)!important}
+
+/* Z-index */
+.lx-z-n1{z-index:-1}.lx-z-0{z-index:0}.lx-z-10{z-index:10}.lx-z-20{z-index:20}.lx-z-50{z-index:50}
+.lx-z-dropdown{z-index:1000}.lx-z-sticky{z-index:1020}.lx-z-fixed{z-index:1030}
+.lx-z-offcanvas{z-index:1040}.lx-z-modal-bg{z-index:1050}.lx-z-modal{z-index:1060}
+.lx-z-popover{z-index:1070}.lx-z-tooltip{z-index:1080}.lx-z-toast{z-index:1090}
+
+/* Ratio */
+.lx-ratio{position:relative;width:100%}
+.lx-ratio>*{position:absolute;top:0;left:0;width:100%;height:100%}
+.lx-ratio::before{display:block;content:"";padding-top:calc(var(--lx-aspect-ratio) * 100%)}
+.lx-ratio-1x1{--lx-aspect-ratio:1}.lx-ratio-4x3{--lx-aspect-ratio:calc(3/4)}
+.lx-ratio-16x9{--lx-aspect-ratio:calc(9/16)}.lx-ratio-21x9{--lx-aspect-ratio:calc(9/21)}
+
+/* Stretched link */
+.lx-stretched-link::after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;content:""}
+
+/* Responsive utilities */
+@media(min-width:640px){
+.lx-sm-block{display:block}.lx-sm-flex{display:flex}.lx-sm-grid{display:grid}.lx-sm-hidden{display:none}
+.lx-sm-text-center{text-align:center}.lx-sm-text-left{text-align:left}
+.lx-sm-w-full{width:100%}.lx-sm-w-auto{width:auto}}
+@media(min-width:768px){
+.lx-md-block{display:block}.lx-md-flex{display:flex}.lx-md-grid{display:grid}.lx-md-hidden{display:none}
+.lx-md-inline-flex{display:inline-flex}.lx-md-inline-block{display:inline-block}
+.lx-md-flex-row{flex-direction:row}.lx-md-flex-col{flex-direction:column}
+.lx-md-justify-center{justify-content:center}.lx-md-justify-between{justify-content:space-between}
+.lx-md-items-center{align-items:center}.lx-md-items-start{align-items:flex-start}
+.lx-md-text-center{text-align:center}.lx-md-text-left{text-align:left}.lx-md-text-right{text-align:right}
+.lx-md-text-sm{font-size:.875rem}.lx-md-text-base{font-size:1rem}.lx-md-text-lg{font-size:1.125rem}.lx-md-text-xl{font-size:1.25rem}.lx-md-text-2xl{font-size:1.5rem}.lx-md-text-3xl{font-size:1.875rem}
+.lx-md-p-0{padding:0}.lx-md-p-2{padding:.5rem}.lx-md-p-4{padding:1rem}.lx-md-p-6{padding:1.5rem}.lx-md-p-8{padding:2rem}
+.lx-md-px-4{padding-inline:1rem}.lx-md-px-6{padding-inline:1.5rem}.lx-md-px-8{padding-inline:2rem}
+.lx-md-py-4{padding-block:1rem}.lx-md-py-6{padding-block:1.5rem}.lx-md-py-8{padding-block:2rem}
+.lx-md-mt-0{margin-top:0}.lx-md-mt-4{margin-top:1rem}.lx-md-mt-8{margin-top:2rem}
+.lx-md-w-full{width:100%}.lx-md-w-auto{width:auto}.lx-md-w-1\/2{width:50%}
+.lx-md-float-start{float:inline-start}.lx-md-float-end{float:inline-end}.lx-md-float-none{float:none}}
+@media(min-width:1024px){
+.lx-lg-block{display:block}.lx-lg-flex{display:flex}.lx-lg-grid{display:grid}.lx-lg-hidden{display:none}
+.lx-lg-inline-flex{display:inline-flex}.lx-lg-inline-block{display:inline-block}
+.lx-lg-flex-row{flex-direction:row}.lx-lg-flex-col{flex-direction:column}
+.lx-lg-justify-center{justify-content:center}.lx-lg-justify-between{justify-content:space-between}
+.lx-lg-items-center{align-items:center}
+.lx-lg-text-base{font-size:1rem}.lx-lg-text-lg{font-size:1.125rem}.lx-lg-text-xl{font-size:1.25rem}.lx-lg-text-2xl{font-size:1.5rem}.lx-lg-text-3xl{font-size:1.875rem}.lx-lg-text-4xl{font-size:2.25rem}
+.lx-lg-p-4{padding:1rem}.lx-lg-p-6{padding:1.5rem}.lx-lg-p-8{padding:2rem}.lx-lg-p-12{padding:3rem}
+.lx-lg-px-6{padding-inline:1.5rem}.lx-lg-px-8{padding-inline:2rem}.lx-lg-px-12{padding-inline:3rem}
+.lx-lg-py-4{padding-block:1rem}.lx-lg-py-6{padding-block:1.5rem}.lx-lg-py-8{padding-block:2rem}
+.lx-lg-w-auto{width:auto}.lx-lg-w-full{width:100%}}
+@media(min-width:1280px){
+.lx-xl-block{display:block}.lx-xl-flex{display:flex}.lx-xl-grid{display:grid}.lx-xl-hidden{display:none}}
+
+/* ================================================================

package/js/breakpoint.js

@@ -0,0 +1,13 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+export const breakpoint = {
+  _bp: { xs: 0, sm: 640, md: 768, lg: 1024, xl: 1280, '2xl': 1536 },
+  current() {
+    const w = window.innerWidth;
+    return Object.entries(this._bp).reverse().find(([, v]) => w >= v)?.[0] || 'xs';
+  },
+  on(bp, fn) {
+    const mq = window.matchMedia(`(min-width: ${this._bp[bp]}px)`);
+    mq.addEventListener('change', e => { if (e.matches) fn(); });
+    if (mq.matches) fn();
+  }
+};

package/js/carousel.js

@@ -0,0 +1,62 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+import { qs, qsa, on, off, emit, trap } from './utils.js';
+
+export class Carousel {
+  constructor(sel, opts = {}) {
+    this.el = typeof sel === 'string' ? qs(sel) : sel;
+    if (!this.el) return;
+    this.opts  = Object.assign({ interval: 5000, pause: 'hover', wrap: true, touch: true }, opts);
+    this.inner = qs('.lx-carousel-inner', this.el);
+    this.items = qsa('.lx-carousel-item', this.el);
+    this.current = this.items.findIndex(i => i.classList.contains('lx-active'));
+    if (this.current < 0) { this.current = 0; if (this.items[0]) this.items[0].classList.add('lx-active'); }
+    this._timer   = null;
+    this._sliding = false;
+    if (this.inner) this._applyTransform(this.current, false);
+    if (this.opts.interval) this.cycle();
+    if (this.opts.pause === 'hover') { on(this.el, 'mouseenter', () => this.pause()); on(this.el, 'mouseleave', () => this.cycle()); }
+    if (this.opts.touch) this._initTouch();
+    this._updateIndicators();
+  }
+  _applyTransform(idx, animate) {
+    if (!this.inner) return;
+    if (!animate) this.inner.style.transition = 'none';
+    this.inner.style.transform = 'translateX(-' + (idx * 100) + '%)';
+    if (!animate) { this.inner.getBoundingClientRect(); this.inner.style.transition = ''; }
+  }
+  _go(idx) {
+    const n = this.items.length;
+    if (!this.opts.wrap && (idx < 0 || idx >= n)) return;
+    if (this._sliding) return;
+    this._sliding = true;
+    this.current  = ((idx % n) + n) % n;
+    this.items.forEach((item, i) => item.classList.toggle('lx-active', i === this.current));
+    if (this.inner) {
+      this._applyTransform(this.current, true);
+      this.inner.addEventListener('transitionend', () => { this._sliding = false; emit(this.el, 'carousel.slid'); }, { once: true });
+      setTimeout(() => { this._sliding = false; }, 400);
+    } else { this._sliding = false; }
+    this._updateIndicators();
+    emit(this.el, 'carousel.slide');
+  }
+  _updateIndicators() {
+    qsa('.lx-carousel-indicators button, .lx-carousel-indicators [data-lx-slide-to]', this.el).forEach((btn, i) => {
+      btn.classList.toggle('lx-active', i === this.current);
+      btn.setAttribute('aria-current', i === this.current ? 'true' : 'false');
+    });
+  }
+  next()  { this._go(this.current + 1); }
+  prev()  { this._go(this.current - 1); }
+  to(idx) { this._go(idx); }
+  cycle() { this.pause(); if (this.opts.interval) this._timer = setInterval(() => this.next(), this.opts.interval); }
+  pause() { clearInterval(this._timer); this._timer = null; }
+  _initTouch() {
+    let startX = 0, startY = 0;
+    on(this.el, 'touchstart', e => { startX = e.touches[0].clientX; startY = e.touches[0].clientY; }, { passive: true });
+    on(this.el, 'touchend', e => {
+      const dx = e.changedTouches[0].clientX - startX;
+      const dy = e.changedTouches[0].clientY - startY;
+      if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 40) dx > 0 ? this.prev() : this.next();
+    });
+  }
+}

package/js/clipboard.js

@@ -0,0 +1,28 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+import { qs, qsa, on, off, emit, trap } from './utils.js';
+
+export const Clipboard = {
+  copy(text) {
+    if (navigator.clipboard && window.isSecureContext) return navigator.clipboard.writeText(text);
+    const el = document.createElement('textarea');
+    el.value = text;
+    el.style.cssText = 'position:fixed;top:-9999px;left:-9999px;opacity:0';
+    document.body.appendChild(el);
+    el.focus(); el.select();
+    try { document.execCommand('copy'); } catch (e) {}
+    el.remove();
+    return Promise.resolve();
+  },
+  bind(sel, getText) {
+    qsa(sel).forEach(btn => {
+      on(btn, 'click', async () => {
+        const text = typeof getText === 'function' ? getText(btn) : (btn.dataset.lxCopy || btn.textContent);
+        await this.copy(text);
+        const orig = btn.textContent;
+        btn.textContent = btn.dataset.lxCopiedText || 'Copied!';
+        btn.classList.add('lx-copied');
+        setTimeout(() => { btn.textContent = orig; btn.classList.remove('lx-copied'); }, 2000);
+      });
+    });
+  }
+};

package/js/collapse.js

@@ -0,0 +1,36 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+import { qs, qsa, on, off, emit, trap } from './utils.js';
+
+export class Collapse {
+  constructor(sel) { this.el = typeof sel === 'string' ? qs(sel) : sel; }
+  show() {
+    if (!this.el) return;
+    emit(this.el, 'collapse.show');
+    this.el.style.height = '0px';
+    this.el.classList.add('lx-collapsing');
+    this.el.classList.remove('lx-collapse', 'lx-show');
+    const h = this.el.scrollHeight;
+    this.el.style.height = h + 'px';
+    this.el.addEventListener('transitionend', () => {
+      this.el.classList.remove('lx-collapsing');
+      this.el.classList.add('lx-collapse', 'lx-show');
+      this.el.style.height = '';
+      emit(this.el, 'collapse.shown');
+    }, { once: true });
+  }
+  hide() {
+    if (!this.el) return;
+    emit(this.el, 'collapse.hide');
+    this.el.style.height = this.el.scrollHeight + 'px';
+    this.el.classList.add('lx-collapsing');
+    this.el.classList.remove('lx-collapse', 'lx-show');
+    requestAnimationFrame(() => { this.el.style.height = '0px'; });
+    this.el.addEventListener('transitionend', () => {
+      this.el.classList.remove('lx-collapsing');
+      this.el.classList.add('lx-collapse');
+      this.el.style.height = '';
+      emit(this.el, 'collapse.hidden');
+    }, { once: true });
+  }
+  toggle() { this.el && this.el.classList.contains('lx-show') ? this.hide() : this.show(); }
+}

package/js/counter.js

@@ -0,0 +1,38 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+import { qs, qsa, on, off, emit, trap } from './utils.js';
+
+export class Counter {
+  constructor(el, opts = {}) {
+    this.el   = typeof el === 'string' ? qs(el) : el;
+    if (!this.el) return;
+    this.opts = Object.assign({
+      start: 0, end: parseInt(this.el.dataset.lxEnd || this.el.textContent) || 0,
+      duration: parseInt(this.el.dataset.lxDuration) || 2000,
+      prefix: this.el.dataset.lxPrefix || '', suffix: this.el.dataset.lxSuffix || '',
+      decimals: parseInt(this.el.dataset.lxDecimals) || 0, easing: true
+    }, opts);
+  }
+  _ease(t) { return t < .5 ? 2 * t * t : -1 + (4 - 2 * t) * t; }
+  _format(n) { return this.opts.prefix + n.toFixed(this.opts.decimals).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + this.opts.suffix; }
+  start() {
+    const { start, end, duration, easing } = this.opts, range = end - start;
+    let startTime = null;
+    const step = ts => {
+      if (!startTime) startTime = ts;
+      const elapsed  = Math.min(ts - startTime, duration);
+      const progress = easing ? this._ease(elapsed / duration) : elapsed / duration;
+      this.el.textContent = this._format(start + range * progress);
+      if (elapsed < duration) requestAnimationFrame(step);
+      else this.el.textContent = this._format(end);
+    };
+    requestAnimationFrame(step);
+  }
+  static observeAll(sel, opts) {
+    if ('IntersectionObserver' in window) {
+      const io = new IntersectionObserver(entries => {
+        entries.forEach(e => { if (e.isIntersecting) { new Counter(e.target, opts).start(); io.unobserve(e.target); } });
+      }, { threshold: .5 });
+      qsa(sel).forEach(el => io.observe(el));
+    } else { qsa(sel).forEach(el => new Counter(el, opts).start()); }
+  }
+}

package/js/dropdown.js

@@ -0,0 +1,27 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+import { qs, qsa, on, off, emit, trap } from './utils.js';
+
+export class Dropdown {
+  constructor(trigger) {
+    this.trigger = typeof trigger === 'string' ? qs(trigger) : trigger;
+    this.menu = this.trigger && this.trigger.nextElementSibling;
+    this._outside = e => { if (!this.trigger.closest('.lx-dropdown').contains(e.target)) this.hide(); };
+  }
+  show() {
+    if (!this.menu) return;
+    emit(this.trigger, 'dropdown.show');
+    this.menu.classList.add('lx-show');
+    this.trigger.setAttribute('aria-expanded', 'true');
+    setTimeout(() => on(document, 'click', this._outside), 0);
+    emit(this.trigger, 'dropdown.shown');
+  }
+  hide() {
+    if (!this.menu) return;
+    emit(this.trigger, 'dropdown.hide');
+    this.menu.classList.remove('lx-show');
+    this.trigger.setAttribute('aria-expanded', 'false');
+    off(document, 'click', this._outside);
+    emit(this.trigger, 'dropdown.hidden');
+  }
+  toggle() { this.menu && this.menu.classList.contains('lx-show') ? this.hide() : this.show(); }
+}

package/js/index.js

@@ -0,0 +1,19 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+export { qs, qsa, on, off, emit, trap } from './utils.js';
+export { Modal }       from './modal.js';
+export { Toast }       from './toast.js';
+export { Collapse }    from './collapse.js';
+export { Dropdown }    from './dropdown.js';
+export { Offcanvas }   from './offcanvas.js';
+export { Tooltip }     from './tooltip.js';
+export { Popover }     from './popover.js';
+export { Tab }         from './tab.js';
+export { Carousel }    from './carousel.js';
+export { Scrollspy }   from './scrollspy.js';
+export { Clipboard }   from './clipboard.js';
+export { Counter }     from './counter.js';
+export { NumberInput } from './number-input.js';
+export { Rating }      from './rating.js';
+export { theme }       from './theme.js';
+export { breakpoint }  from './breakpoint.js';
+export { init }        from './init.js';