luda 0.1.5

data/assets/stylesheets/luda/_core/collections/_tab.sass

@@ -0,0 +1,18 @@
++install(shared-collection-tab)
+
+  .tab-indicators
+    overflow: auto
+    -webkit-overflow-scrolling: touch
+
+  .tab-panes
+    padding-top: $tab-panes-padding-top-rem
+    padding-bottom: $tab-panes-padding-bottom-rem
+    overflow: auto
+    -webkit-overflow-scrolling: touch
+    background: $tab-panes-background
+
+  .tab-pane
+    display: none
+
+  .tab-pane-active.tab-pane
+    display: block

data/assets/stylesheets/luda/_core/elements/_badge.sass

@@ -0,0 +1,19 @@
++install(shared-element-badge)
+
+  .badge,
+  .badge-baseline
+    display: inline-flex
+    position: relative
+    left: $badge-offset-left-em
+    align-items: center
+    min-width: $badge-height-em
+    height: $badge-height-em
+    padding: $badge-padding-em
+    font-size: 1em / $typography-size-scale-ratio
+    white-space: nowrap
+    color: $badge-color
+    background: $badge-background
+    border-radius: 9999px
+
+  .badge
+    top: $badge-offset-top-em

data/assets/stylesheets/luda/_core/elements/_baseline.sass

@@ -0,0 +1,22 @@
++install(shared-element-baseline)
+
+  .baseline-overlay
+    position: relative
+
+  $_baseline-gradient: linear-gradient(to bottom, #0ff 0, rgba(255, 255, 255, 0) 1px)
+  $_baseline-background: $_baseline-gradient left top / 100% 1rem repeat-y
+
+  .baseline-overlay::after
+    display: block
+    position: absolute
+    top: 0
+    right: 0
+    bottom: 0
+    left: 0
+    z-index: $z-index-highest
+    pointer-events: none
+    content: ""
+    background: $_baseline-background
+
+  .baseline-background
+    background: $_baseline-background

data/assets/stylesheets/luda/_core/elements/_button.sass

@@ -0,0 +1,136 @@
++install(shared-element-button)
+
+  .btn,
+  .btn-check,
+  .btn-radio,
+  .btn-file
+    -webkit-appearance: none
+    -moz-appearance: none
+    appearance: none
+    display: inline-flex
+    vertical-align: top
+    flex: 0 0 auto
+    max-width: 100%
+    min-width: $button-height-rem
+    height: $button-height-rem
+    font-size: typo-size($button-typography-size-level)
+    line-height: normal
+    white-space: nowrap
+    cursor: pointer
+    -ms-touch-action: manipulation
+    touch-action: manipulation
+    -webkit-user-select: none
+    -moz-user-select: none
+    -ms-user-select: none
+    user-select: none
+    text-decoration: none
+    background: none
+
+  +browser-edge
+    input.btn
+      display: inline-block
+      text-align: center
+
+  .btn,
+  .btn-check label,
+  .btn-radio label,
+  .btn-file label
+    align-items: center
+    justify-content: center
+    padding: 0 $button-helvertical-padding-em
+    border: $button-border-style $button-border-width
+    overflow: hidden
+    border-radius: existing($button-border-radius, 0)
+
+  .btn-check label,
+  .btn-radio label,
+  .btn-file label
+    display: flex
+    width: 100%
+    height: inherit
+    // pointer-events: none
+
+  .btn > *,
+  .btn-check label > *,
+  .btn-radio label > *,
+  .btn-file label > *
+    flex: 0 0 auto
+
+  .btn-check input,
+  .btn-radio input,
+  .btn-file input
+    -webkit-appearance: none
+    -moz-appearance: none
+    appearance: none
+    width: 0.001px
+    min-width: 100%
+    // height: 0.001px
+    height: 100%
+    margin-right: -100%
+    overflow: hidden
+    cursor: pointer
+    opacity: 0
+
+  .btn-check input[disabled],
+  .btn-radio input[disabled],
+  .btn-file input[disabled]
+    opacity: 0
+
+  // remove webkit file upload button to prevent cursor change when hover
+  .btn-file ::-webkit-file-upload-button
+    display: none
+
+  .btn:-moz-focusring
+    outline: none
+
+  .btn.focus,
+  .btn-check input.focus ~ label,
+  .btn-radio input.focus ~ label,
+  .btn-file input.focus ~ label
+    +_focus
+
+
+
+  .btn-fluid.btn,
+  .btn-fluid.btn-check,
+  .btn-fluid.btn-radio,
+  .btn-fluid.btn-file
+    display: flex
+    flex: 1 1 auto
+    width: 100%
+
+  .btn-small.btn,
+  .btn-small.btn-check,
+  .btn-small.btn-radio,
+  .btn-small.btn-file
+    min-width: $button-small-height-rem
+    height: $button-small-height-rem
+    font-size: typo-size($button-small-typography-size-level)
+
+  .btn-large.btn,
+  .btn-large.btn-check,
+  .btn-large.btn-radio,
+  .btn-large.btn-file
+    min-width: $button-large-height-rem
+    height: $button-large-height-rem
+    font-size: typo-size($button-large-typography-size-level)
+
+
+
+  +button-solid(primary, $button-primary-color, $button-primary-hover-color, $button-primary-active-color, $button-primary-background, $button-primary-hover-background, $button-primary-active-background, $button-primary-border-color, $button-primary-hover-border-color, $button-primary-active-border-color, $button-primary-box-shadow, $button-primary-hover-box-shadow, $button-primary-active-box-shadow)
+  +button-solid(secondary, $button-secondary-color, $button-secondary-hover-color, $button-secondary-active-color, $button-secondary-background, $button-secondary-hover-background, $button-secondary-active-background, $button-secondary-border-color, $button-secondary-hover-border-color, $button-secondary-active-border-color, $button-secondary-box-shadow, $button-secondary-hover-box-shadow, $button-secondary-active-box-shadow)
+  +button-solid(danger, $button-danger-color, $button-danger-hover-color, $button-danger-active-color, $button-danger-background, $button-danger-hover-background, $button-danger-active-background, $button-danger-border-color, $button-danger-hover-border-color, $button-danger-active-border-color, $button-danger-box-shadow, $button-danger-hover-box-shadow, $button-danger-active-box-shadow)
+  +button-solid(dark, $button-dark-color, $button-dark-hover-color, $button-dark-active-color, $button-dark-background, $button-dark-hover-background, $button-dark-active-background, $button-dark-border-color, $button-dark-hover-border-color, $button-dark-active-border-color, $button-dark-box-shadow, $button-dark-hover-box-shadow, $button-dark-active-box-shadow)
+  +button-solid(light, $button-light-color, $button-light-hover-color, $button-light-active-color, $button-light-background, $button-light-hover-background, $button-light-active-background, $button-light-border-color, $button-light-hover-border-color, $button-light-active-border-color, $button-light-box-shadow, $button-light-hover-box-shadow, $button-light-active-box-shadow)
+
+  +button-hollow(primary, $button-hollow-primary-color, $button-hollow-primary-hover-color, $button-hollow-primary-active-color, $button-hollow-primary-hover-background, $button-hollow-primary-active-background, $button-hollow-primary-border-color, $button-hollow-primary-hover-border-color, $button-hollow-primary-active-border-color, $button-hollow-primary-box-shadow, $button-hollow-primary-hover-box-shadow, $button-hollow-primary-active-box-shadow)
+  +button-hollow(secondary, $button-hollow-secondary-color, $button-hollow-secondary-hover-color, $button-hollow-secondary-active-color, $button-hollow-secondary-hover-background, $button-hollow-secondary-active-background, $button-hollow-secondary-border-color, $button-hollow-secondary-hover-border-color, $button-hollow-secondary-active-border-color, $button-hollow-secondary-box-shadow, $button-hollow-secondary-hover-box-shadow, $button-hollow-secondary-active-box-shadow)
+  +button-hollow(danger, $button-hollow-danger-color, $button-hollow-danger-hover-color, $button-hollow-danger-active-color, $button-hollow-danger-hover-background, $button-hollow-danger-active-background, $button-hollow-danger-border-color, $button-hollow-danger-hover-border-color, $button-hollow-danger-active-border-color, $button-hollow-danger-box-shadow, $button-hollow-danger-hover-box-shadow, $button-hollow-danger-active-box-shadow)
+  +button-hollow(dark, $button-hollow-dark-color, $button-hollow-dark-hover-color, $button-hollow-dark-active-color, $button-hollow-dark-hover-background, $button-hollow-dark-active-background, $button-hollow-dark-border-color, $button-hollow-dark-hover-border-color, $button-hollow-dark-active-border-color, $button-hollow-dark-box-shadow, $button-hollow-dark-hover-box-shadow, $button-hollow-dark-active-box-shadow)
+  +button-hollow(light, $button-hollow-light-color, $button-hollow-light-hover-color, $button-hollow-light-active-color, $button-hollow-light-hover-background, $button-hollow-light-active-background, $button-hollow-light-border-color, $button-hollow-light-hover-border-color, $button-hollow-light-active-border-color, $button-hollow-light-box-shadow, $button-hollow-light-hover-box-shadow, $button-hollow-light-active-box-shadow)
+
+  +button-text(primary, $button-text-primary-color, $button-text-primary-hover-color, $button-text-primary-active-color, $button-text-primary-text-shadow, $button-text-primary-hover-text-shadow, $button-text-primary-active-text-shadow)
+  +button-text(secondary, $button-text-secondary-color, $button-text-secondary-hover-color, $button-text-secondary-active-color, $button-text-secondary-text-shadow, $button-text-secondary-hover-text-shadow, $button-text-secondary-active-text-shadow)
+  +button-text(danger, $button-text-danger-color, $button-text-danger-hover-color, $button-text-danger-active-color, $button-text-danger-text-shadow, $button-text-danger-hover-text-shadow, $button-text-danger-active-text-shadow)
+  +button-text(dark, $button-text-dark-color, $button-text-dark-hover-color, $button-text-dark-active-color, $button-text-dark-text-shadow, $button-text-dark-hover-text-shadow, $button-text-dark-active-text-shadow)
+  +button-text(light, $button-text-light-color, $button-text-light-hover-color, $button-text-light-active-color, $button-text-light-text-shadow, $button-text-light-hover-text-shadow, $button-text-light-active-text-shadow)

data/assets/stylesheets/luda/_core/elements/_container.sass

@@ -0,0 +1,8 @@
++install(shared-element-container)
+
+  .container
+    max-width: $container-max-width-px
+    min-width: 0
+    padding: $container-padding-rem
+    margin-right: auto
+    margin-left: auto

data/assets/stylesheets/luda/_core/elements/_grid.sass

@@ -0,0 +1,55 @@
++install(shared-element-grid)
+
+  .grid,
+  .grid-edge
+    display: flex
+    flex-wrap: wrap
+    align-items: flex-start
+    width: 100%
+
+  [class*=col-]
+    flex-grow: 0
+    flex-shrink: 0
+
+  .col-auto
+    flex-basis: 0
+    flex-grow: 1
+    flex-shrink: 1
+    max-width: 100%
+    min-width: 1px
+
+  .grid > [class*=col-]
+    padding-right: $grid-gutter-width-rem / 2
+    padding-left: $grid-gutter-width-rem / 2
+
+  .grid [class*=col-] .grid
+    width: auto
+    margin-right: - $grid-gutter-width-rem / 2
+    margin-left: - $grid-gutter-width-rem / 2
+
+  .grid .grid-edge > [class*=col-] > .grid
+    margin-right: 0
+    margin-left: 0
+
+  .grid-edge.container
+    padding: 0
+
+
+
+  @each $breakpoint in map-keys($breakpoint-width-pxs)
+    $class-fix: _responsive-class-fix($breakpoint)
+
+    +media-width($breakpoint)
+
+      @for $count from 1 through $grid-columns
+        $column-width: $count / $grid-columns * 100%
+
+        .col-#{$count}#{$class-fix}
+          flex-basis: $column-width
+          max-width: $column-width
+
+      @for $count from 1 to $grid-columns
+        $margin-left: $count / $grid-columns * 100%
+
+        .offset-#{$count}#{$class-fix}
+          margin-left: $margin-left

data/assets/stylesheets/luda/_core/elements/_icon.sass

@@ -0,0 +1,110 @@
++install(shared-element-icon)
+
+  .ico
+    display: inline-block
+    vertical-align: text-top
+    position: relative
+    width: 1em
+    height: 1em
+    font-size: $icon-size-em
+    line-height: normal
+    overflow: hidden
+    -webkit-user-select: none
+    -moz-user-select: none
+    -ms-user-select: none
+    user-select: none
+    object-fit: contain
+    object-position: center
+    font-style: normal
+    background-position: center
+    background-size: contain
+
+  +browser-firefox
+    .ico
+      line-height: $icon-firefox-line-height
+
+  .ico::before,
+  .ico::after
+    display: block
+    position: absolute
+    top: 50%
+    left: 50%
+    transform: translate(-50%, -50%)
+
+
+
+  .ico-left::before,
+  .ico-right::before,
+  .ico-up::before,
+  .ico-down::before
+    width: 0.6em
+    height: 0.6em
+    border: $icon-stroke-width solid
+    border-right: none
+    border-bottom: none
+    content: ''
+
+  .ico-left::before
+    transform: translate(-25%, -50%) rotate(-45deg)
+
+  .ico-right::before
+    transform: translate(-75%, -50%) rotate(135deg)
+
+  .ico-up::before
+    transform: translate(-50%, -25%) rotate(45deg)
+
+  .ico-down::before
+    transform: translate(-50%, -75%) rotate(225deg)
+
+
+
+  .ico-plus::before,
+  .ico-plus::after,
+  .ico-cross::before,
+  .ico-cross::after
+    content: ''
+    background: currentColor
+
+  .ico-plus::before,
+  .ico-cross::before
+    width: 0.9em
+    height: $icon-stroke-width
+
+  .ico-plus::after,
+  .ico-cross::after
+    width: $icon-stroke-width
+    height: 0.9em
+
+  .ico-cross::before,
+  .ico-cross::after
+    transform: translate(-50%, -50%) rotate(45deg)
+
+
+
+  .ico-menu::before
+    width: 0.9em
+    height: $icon-stroke-width
+    content: ''
+    background: currentColor
+    box-shadow: 0 -0.35em, 0 0.35em
+
+
+
+  .ico-search::before
+    top: 5%
+    left: 5%
+    width: 0.75em
+    height: 0.75em
+    border: $icon-stroke-width solid
+    content: ''
+    border-radius: 50%
+    transform: translate(0, 0) rotate(45deg)
+
+  .ico-search::after
+    top: 80%
+    left: 80%
+    width: 0.4em
+    height: $icon-stroke-width
+    content: ''
+    background: currentColor
+    transform: translate(-50%, -50%) rotate(45deg)

data/assets/stylesheets/luda/_core/elements/_overlay.sass

@@ -0,0 +1,11 @@
++install(shared-element-overlay)
+
+  html:has(.overlay.toggle-active),
+  body:has(.overlay.toggle-active)
+    overflow: hidden
+
+  .overlay
+    +overlay
+
+  .overlay-body
+    +overlay-body

data/assets/stylesheets/luda/_core/elements/_progress.sass

@@ -0,0 +1,31 @@
++install(shared-element-progress)
+
+  .progress
+    display: flex
+    height: $progress-height-rem
+    background: $progress-background
+    border-radius: $progress-border-radius
+
+  .progress-bar
+    display: flex
+    align-items: center
+    justify-content: flex-end
+    min-width: $progress-bar-min-width-em
+    height: 100%
+    padding: $progress-bar-padding
+    font-size: typo-size($progress-bar-typography-size-level)
+    white-space: nowrap
+    overflow: hidden
+    color: $progress-bar-color
+    background: $progress-bar-background
+    border-radius: $progress-border-radius
+
+  @if $progress-border-radius and $progress-border-radius != 0
+
+    .progress-bar:not(:first-child)
+      border-top-left-radius: 0
+      border-bottom-left-radius: 0
+
+    .progress-bar:not(:last-child)
+      border-top-right-radius: 0
+      border-bottom-right-radius: 0

data/assets/stylesheets/luda/_core/elements/_scrollbar.sass

@@ -0,0 +1,21 @@
++install(shared-element-scrollbar)
+
+  +media-width($scrollbar-width-breakpoint)
+
+    html
+      -ms-overflow-style: $scrollbar-ie-edge-overflow-style
+
+  +browser-chrome-and-opera
+
+    +media-width($scrollbar-width-breakpoint)
+
+      html
+        overflow: overlay
+
+      ::-webkit-scrollbar
+        width: $scrollbar-breakpoint-vertical-width-rem
+        height: $scrollbar-breakpoint-horizontal-height-rem
+
+      ::-webkit-scrollbar-thumb
+        background: $scrollbar-thumb-background
+        border-radius: $scrollbar-thumb-border-radius