@monabbous/slidebox 0.0.6 → 1.0.0

package/README.md

@@ -1,55 +1,65 @@
-# Slidebox
-![Example](https://i.imgur.com/yyRPh0R.gif)
-## [Example (click me)](https://htmlpreview.github.io/?https://github.com/monabbous/slidebox/blob/master/examples/simple.html)
-As you can see in the example above, this slidebox is easy to configure with these two css properties, `color` and `font-size`.
-
-### Quick Setup
-Include in your html
-
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"/>
-    <link rel="stylesheet" href="https://unpkg.com/@monabbous/slidebox@0.0.3/dist/css/slidebox.css"/>
-
-Add the `slidebox` class
-
-    <input style="font-size: 24px" type="checkbox" class="slidebox">
-    
-## Installation (Sass)
-#### 1. Font Awesome
-First you must include **[Font Awesome](https://fontawesome.com)** in your project (Preferable Font Awesome 5).
-#### 2. Slidebox
-
-Using `Sass` with `NPM` just install with
-
-    npm i @monabbous/slidebox
-    
-Then include in your sass style file
-    
-    @import '~@monabbous/slidebox';
-
-## Usage
-Simply in your checkbox element add the slidebox class.
-
-    <input type="checkbox" class="slidebox">
-    
-### Custom Style
-Just like the Example, you can modify the color and the size of the checkbox.
-
-    <input style="font-size: 24px" type="checkbox" class="slidebox">
-
-Make sure when modifying the color to add class `dark` when using a dark color, and `light` when using a light color.
-
-    <!-- dark color -->
-    <input style="color:#040491" type="checkbox" class="slidebox dark">
-    
-    <!-- light color -->
-    <input style="color:#a8a8ff" type="checkbox" class="slidebox light">
-
-You can also invert the visible output of the slide box, where the value of the checkbox is the opposite of how it is shown.
-
-    <input type="checkbox" class="slidebox inverted">
-
-### Changing the default Configuration
-    
-    $slideboxColorDefaultColor: blue;
-    $slideboxClassPrefix: 'nabbous-';
-    @import '~@monabbous/slidebox';
+# Slidebox Lab
+
+An elastic CSS switch with a playground for geometry, colors, and motion.
+
+[Preview the interactive playground online](https://htmlpreview.github.io/?https://github.com/monabbous/slidebox/blob/main/index.html)
+
+![Slidebox Lab demo: default geometry, 200ms ease-in-out](assets/slidebox-demo.webp)
+
+The animation uses the default width (2), thumb spacing (0.33), deformation (0.1), and a 200ms `ease-in-out` transition.
+
+## npm package
+
+The published CSS package keeps the name [`@monabbous/slidebox`](https://www.npmjs.com/package/@monabbous/slidebox).
+The package includes the switch stylesheet at `dist/css/slidebox.css` and a Sass-compatible entrypoint at `scss/slidebox.scss`. The playground is not included in npm.
+
+```bash
+npm install @monabbous/slidebox
+```
+
+Import `@monabbous/slidebox/dist/css/slidebox.css` in a stylesheet or through your bundler, then use `<input class="slidebox" type="checkbox">`. The package is built from the component rules in `style.css` using `npm run build`.
+
+## Manual npm releases
+
+The release workflow is [Publish to npm](.github/workflows/publish-npm.yml). It is triggered **only** through GitHub Actions > Run workflow on `main`, with a `patch`, `minor`, or `major` choice.
+
+The manifest starts at `0.3.0`, so the first `patch` dispatch will release `0.3.1` (once npm credentials are configured). The workflow builds and tests the package, creates a `chore(release): vX.Y.Z` commit and tag, pushes both to `main`, then publishes to npm.
+
+Before the first release:
+
+1. In GitHub Settings > General > Default branch, change `master` to `main`.
+2. Add a granular npm publish token as the repository Actions secret `NPM_TOKEN`, scoped to `@monabbous/slidebox`, with permission to publish. Never commit the token.
+3. Ensure GitHub Actions has permission to write repository contents.
+4. Manually dispatch the release workflow on `main`.
+
+The workflow does not run on pushes or tags. A failed npm publish after the Git tag has been pushed requires fixing the publish failure for that version before choosing a new bump. The old library is preserved in `legacy/`.
+
+## Run locally
+
+Clone this repository, then serve its root directory:
+
+```bash
+python3 -m http.server 8080
+```
+
+Open `http://localhost:8080`. The lab uses plain HTML, CSS, and JavaScript, without a build step.
+
+## Playground
+
+- Adjust track width, thumb spacing, press deformation, and transition duration.
+- Change easing family and direction (In, Out, or In-Out), including Elastic and Bounce.
+- Compare Slidebox against native controls in light and dark schemes.
+- Choose browser-default, CSS system, nabous.dev, or custom colors.
+- Copy complete CSS, Tailwind v4 `@utility` CSS, or configuration variables.
+
+Chromium currently lacks support for the `AccentColor` CSS color keyword. In browser-default mode, the custom thumb uses a blue approximation in light mode and `SelectedItem` in dark mode, while native controls retain `accent-color: auto`. Browsers that support `AccentColor` use it automatically.
+
+Controls can be adjusted without triggering transition animations. The selected duration is restored after two animation frames.
+
+The easing functions follow [easings.net](https://easings.net/). Elastic and Bounce use sampled CSS `linear()` timing functions.
+
+## Original Slidebox package
+
+The original Sass package, compiled CSS, package manifests, and example are preserved in [`legacy/`](legacy/). See the [legacy README](legacy/README.md) for the previous installation instructions.
+
+[Source](https://github.com/monabbous/slidebox) · [nabous.dev](https://nabous.dev)

package/dist/css/slidebox.css

@@ -1,208 +1,58 @@
-@charset "UTF-8";
-input[type=checkbox].slidebox {
-  -webkit-appearance: none !important;
-  -moz-appearance: none !important;
-  -ms-appearance: none !important;
-  -o-appearance: none !important;
-  appearance: none !important;
-  height: auto;
-  width: auto;
-  line-height: 0px;
-  position: relative;
-  color: blue;
-  outline: 0 !important;
+.slidebox {
+  --_container-width-ratio: 2;
+  --_thumb-spacing-ratio: .33;
+  --_deform: .1;
+  --_duration: 200ms;
+  --_easing-function: ease-in-out;
+  --_track: Field;
+  --_border: ButtonBorder;
+  --_off: FieldText;
+  --_on: light-dark(#0b75ff, SelectedItem);
+  appearance: none;
+  -webkit-appearance: none;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(1em * var(--_container-width-ratio));
+  height: 1em;
+  font-size: 54px;
+  padding: 0;
+  border: 1px solid var(--_border);
+  border-radius: 100vw;
+  background: var(--_track);
   cursor: pointer;
-  padding: 0 0.4em;
-  font-size: 1em;
-  transform-origin: center center;
 }
-input[type=checkbox].slidebox:focus::after {
-  outline: auto 5px -webkit-focus-ring-color;
+@supports (color: AccentColor) {
+  .slidebox { --_on: AccentColor; }
 }
-input[type=checkbox].slidebox::before {
-  direction: ltr;
-  position: absolute;
-  content: "";
-  font-weight: 900;
-  font-family: "Font Awesome 5 Free";
+.slidebox::after {
+  --_start: 0; --_end: 1;
+  content: "";
   display: block;
-  letter-spacing: -0.8em;
-  margin-left: 0.4em;
-  left: 50%;
-  top: 50%;
-  transform-origin: center center;
-  -webkit-transform: translate(-50%, -50%) scale(0.8);
-  transform: translate(-50%, -50%) scale(0.8);
-  width: 3.2em;
+  flex: 1 1 auto;
+  min-width: 0;
+  width: calc((1 - var(--_thumb-spacing-ratio)) * 1em);
+  height: calc((1 - var(--_thumb-spacing-ratio)) * 1em);
+  margin-block: calc(var(--_thumb-spacing-ratio) * .5em);
+  margin-inline-start: calc((1em * var(--_container-width-ratio) - 1em) * var(--_start) + var(--_thumb-spacing-ratio) * .5em);
+  margin-inline-end: calc((1em * var(--_container-width-ratio) - 1em) * var(--_end) + var(--_thumb-spacing-ratio) * .5em);
+  border-radius: inherit;
+  background: var(--_off);
+  transition: background var(--_duration) var(--_easing-function), margin-inline-start var(--_duration) var(--_easing-function), margin-inline-end var(--_duration) var(--_easing-function);
+  transition-delay: 0s, 0s, calc(var(--_duration) * var(--_deform));
+}
+.slidebox:checked::after {
+  --_start: 1; --_end: 0;
+  background: var(--_on);
+  transition-delay: 0s, calc(var(--_duration) * var(--_deform)), 0s;
+}
+.slidebox:not(:checked):active::after { --_end: calc(1 - var(--_deform)); }
+.slidebox:checked:active::after { --_start: calc(1 - var(--_deform)); }
+.slidebox:disabled { cursor: not-allowed; opacity: .5; }
+@media (forced-colors: active) {
+  .slidebox { --_track: Field; --_border: ButtonBorder; --_off: FieldText; --_on: Highlight; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .slidebox::after { transition-duration: .01ms; transition-delay: 0ms; }
 }
-input[type=checkbox].slidebox::after {
-  line-height: 1em;
-  position: relative;
-  content: "";
-  font-weight: 900;
-  padding: 0.4em;
-  font-family: "Font Awesome 5 Free";
-  display: block;
-  transform-origin: center center;
-  animation-duration: 0.2s;
-  animation-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6);
-  animation-fill-mode: forwards;
-  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
-}
-input[type=checkbox].slidebox::before, input[type=checkbox].slidebox::after {
-  transition: color 0.2s ease-in-out;
-}
-:not([dir=rtl]) input[type=checkbox].slidebox:not(.inverted)::after {
-  animation-name: slideboxToRight;
-}
-
-[dir=rtl] input[type=checkbox].slidebox:not(.inverted)::after {
-  animation-name: slideboxToLeft;
-}
-
-input[type=checkbox].slidebox:not(.inverted).dark::before {
-  color: white;
-}
-input[type=checkbox].slidebox:not(.inverted).dark::after {
-  color: #e6e6e6;
-}
-input[type=checkbox].slidebox:not(.inverted).dark::after {
-  filter: brightness(130%) drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
-}
-input[type=checkbox].slidebox:not(.inverted).light::before {
-  color: white;
-}
-input[type=checkbox].slidebox:not(.inverted).light::after {
-  color: #f7f7f7;
-}
-input[type=checkbox].slidebox:not(.inverted).light::before {
-  filter: brightness(70%);
-}
-input[type=checkbox].slidebox:not(.inverted)::before {
-  color: white;
-}
-input[type=checkbox].slidebox:not(.inverted)::after {
-  color: #f7f7f7;
-}
-input[type=checkbox].slidebox:not(.inverted)::before {
-  filter: brightness(70%);
-}
-input[type=checkbox].slidebox:not(.inverted):checked::before, input[type=checkbox].slidebox:not(.inverted):checked::after {
-  color: inherit;
-}
-:not([dir=rtl]) input[type=checkbox].slidebox:not(.inverted):checked::after {
-  animation-name: slideboxToLeft;
-}
-
-[dir=rtl] input[type=checkbox].slidebox:not(.inverted):checked::after {
-  animation-name: slideboxToRight;
-}
-
-:not([dir=rtl]) input[type=checkbox].slidebox:not(.inverted):active:checked::after {
-  -webkit-transform: translateX(calc(-50% + 0.4em)) scale(1.1) !important;
-  transform: translateX(calc(-50% + 0.4em)) scale(1.1) !important;
-}
-
-[dir=rtl] input[type=checkbox].slidebox:not(.inverted):active:checked::after {
-  -webkit-transform: translateX(calc(50% - 0.4em)) scale(1.1) !important;
-  transform: translateX(calc(50% - 0.4em)) scale(1.1) !important;
-}
-
-:not([dir=rtl]) input[type=checkbox].slidebox:not(.inverted):active:not(:checked)::after {
-  -webkit-transform: translateX(calc(50% - 0.4em)) scale(1.1) !important;
-  transform: translateX(calc(50% - 0.4em)) scale(1.1) !important;
-}
-
-[dir=rtl] input[type=checkbox].slidebox:not(.inverted):active:not(:checked)::after {
-  -webkit-transform: translateX(calc(-50% + 0.4em)) scale(1.1) !important;
-  transform: translateX(calc(-50% + 0.4em)) scale(1.1) !important;
-}
-
-input[type=checkbox].slidebox.inverted::before, input[type=checkbox].slidebox.inverted::after {
-  color: inherit;
-}
-:not([dir=rtl]) input[type=checkbox].slidebox.inverted::after {
-  animation-name: slideboxToLeft;
-}
-
-[dir=rtl] input[type=checkbox].slidebox.inverted::after {
-  animation-name: slideboxToRight;
-}
-
-input[type=checkbox].slidebox.inverted.dark::after {
-  filter: brightness(130%) drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
-}
-input[type=checkbox].slidebox.inverted.light::before {
-  filter: brightness(70%);
-}
-input[type=checkbox].slidebox.inverted::before {
-  filter: brightness(70%);
-}
-:not([dir=rtl]) input[type=checkbox].slidebox.inverted:checked::after {
-  animation-name: slideboxToRight;
-}
-
-[dir=rtl] input[type=checkbox].slidebox.inverted:checked::after {
-  animation-name: slideboxToLeft;
-}
-
-input[type=checkbox].slidebox.inverted:checked.dark::before {
-  color: white;
-}
-input[type=checkbox].slidebox.inverted:checked.dark::after {
-  color: #e6e6e6;
-}
-input[type=checkbox].slidebox.inverted:checked.light::before {
-  color: white;
-}
-input[type=checkbox].slidebox.inverted:checked.light::after {
-  color: #f7f7f7;
-}
-input[type=checkbox].slidebox.inverted:checked::before {
-  color: white;
-}
-input[type=checkbox].slidebox.inverted:checked::after {
-  color: #f7f7f7;
-}
-:not([dir=rtl]) input[type=checkbox].slidebox.inverted:active:checked::after {
-  -webkit-transform: translateX(calc(50% - 0.4em)) scale(1.1) !important;
-  transform: translateX(calc(50% - 0.4em)) scale(1.1) !important;
-}
-
-[dir=rtl] input[type=checkbox].slidebox.inverted:active:checked::after {
-  -webkit-transform: translateX(calc(-50% + 0.4em)) scale(1.1) !important;
-  transform: translateX(calc(-50% + 0.4em)) scale(1.1) !important;
-}
-
-:not([dir=rtl]) input[type=checkbox].slidebox.inverted:active:not(:checked)::after {
-  -webkit-transform: translateX(calc(-50% + 0.4em)) scale(1.1) !important;
-  transform: translateX(calc(-50% + 0.4em)) scale(1.1) !important;
-}
-
-[dir=rtl] input[type=checkbox].slidebox.inverted:active:not(:checked)::after {
-  -webkit-transform: translateX(calc(50% - 0.4em)) scale(1.1) !important;
-  transform: translateX(calc(50% - 0.4em)) scale(1.1) !important;
-}
-
-@keyframes slideboxToLeft {
-  from {
-    -webkit-transform: translateX(calc(50% - 0.4em));
-    transform: translateX(calc(50% - 0.4em));
-  }
-  to {
-    -webkit-transform: translateX(calc(-50% + 0.4em));
-    transform: translateX(calc(-50% + 0.4em));
-  }
-}
-@keyframes slideboxToRight {
-  from {
-    -webkit-transform: translateX(calc(-50% + 0.4em));
-    transform: translateX(calc(-50% + 0.4em));
-  }
-  to {
-    -webkit-transform: translateX(calc(50% - 0.4em));
-    transform: translateX(calc(50% - 0.4em));
-  }
-}
-
-/*# sourceMappingURL=slidebox.css.map */

package/package.json

@@ -1,30 +1,38 @@
 {
   "name": "@monabbous/slidebox",
-  "version": "0.0.6",
-  "style": "dist/css/slidebox.css",
-  "sass": "scss/slidebox.scss",
-  "keywords": [
-    "scss",
-    "switch",
-    "toggle",
-    "button",
-    "css",
-    "simple",
-    "style",
-    "slidebox",
-    "checkbox"
+  "version": "1.0.0",
+  "description": "Elastic, system-color-aware CSS checkbox switch.",
+  "license": "ISC",
+  "style": "./dist/css/slidebox.css",
+  "sass": "./scss/slidebox.scss",
+  "files": [
+    "dist/css/slidebox.css",
+    "scss/slidebox.scss"
   ],
+  "publishConfig": {
+    "access": "public"
+  },
   "repository": {
     "type": "git",
-    "url": "https://github.com/monabbous/slidebox.git"
+    "url": "git+https://github.com/monabbous/slidebox.git"
+  },
+  "homepage": "https://github.com/monabbous/slidebox#readme",
+  "bugs": {
+    "url": "https://github.com/monabbous/slidebox/issues"
   },
   "scripts": {
-    "build": "sass scss/slidebox.scss dist/css/slidebox.css",
-    "watch": "sass scss/slidebox.scss dist/css/slidebox.css --watch"
+    "build": "node scripts/build.mjs",
+    "test": "node --test tests/*.test.mjs",
+    "prepack": "npm run build"
   },
-  "author": "Mohamed Nabous <mohamed.nabbous@gmail.com>",
-  "license": "ISC",
-  "devDependencies": {
-    "sass": "^1.28.0"
-  }
+  "keywords": [
+    "slidebox",
+    "switch",
+    "toggle",
+    "checkbox",
+    "css",
+    "scss",
+    "elastic",
+    "system-colors"
+  ]
 }

package/scss/slidebox.scss

@@ -1,266 +1,58 @@
-$slideboxColorDefaultColor: blue !default;
-$slideboxClassPrefix: '' !default;
-
-$spacing: 0.8em;
-
-$slideboxShadowFilter: drop-shadow(0 0 4px rgba(black, 0.5));
-
-@mixin dark-filters() {
-
-  &::after {
-    filter: brightness(130%) $slideboxShadowFilter;
-  }
-}
-
-@mixin dark-colors() {
-  &::before {
-    color: lighten(grey, 50%);
-  }
-
-  &::after {
-    color: lighten(grey, 40%);
-  }
-}
-
-@mixin light-filters() {
-  &::before {
-    filter: brightness(70%);
-  }
-}
-
-@mixin light-colors() {
-  &::before {
-    color: lighten(grey, 50%);
-  }
-
-  &::after {
-    color: lighten(#444444, 70%);
-  }
-}
-
-@mixin slideboxRight($extraTransform: null) {
-  -webkit-transform: translateX(calc(50% - #{$spacing / 2})) $extraTransform;
-  transform: translateX(calc(50% - #{$spacing / 2})) $extraTransform;
-}
-
-
-@mixin slideboxLeft($extraTransform: null) {
-  -webkit-transform: translateX(calc(-50% + #{$spacing / 2})) $extraTransform;
-  transform: translateX(calc(-50% + #{$spacing / 2})) $extraTransform;
-}
-
-
-@mixin slideboxStart($extraTransform: null) {
-  @at-root :not([dir=rtl]) & {
-    @include slideboxLeft($extraTransform);
-  }
-  @at-root [dir=rtl] & {
-    @include slideboxRight($extraTransform);
-  }
-}
-
-@mixin slideboxEnd($extraTransform: null) {
-  @at-root :not([dir=rtl]) & {
-    @include slideboxRight($extraTransform);
-  }
-  @at-root [dir=rtl] & {
-    @include slideboxLeft($extraTransform);
-  }
-}
-
-
-
-@mixin slideboxToStartAnimation() {
-  @at-root :not([dir=rtl]) & {
-    animation-name: slideboxToLeft;
-  }
-  @at-root [dir=rtl] & {
-    animation-name: slideboxToRight;
-  }
-}
-
-@mixin slideboxToEndAnimation() {
-  @at-root :not([dir=rtl]) & {
-    animation-name: slideboxToRight;
-  }
-  @at-root [dir=rtl] & {
-    animation-name: slideboxToLeft;
-  }
-}
-
-input[type=checkbox].#{$slideboxClassPrefix}slidebox {
-  -webkit-appearance: none !important;
-  -moz-appearance: none !important;
-  -ms-appearance: none !important;
-  -o-appearance: none !important;
-  appearance: none !important;
-  height: auto;
-  width: auto;
-  line-height: 0px;
-  position: relative;
-  color: $slideboxColorDefaultColor;
-  outline: 0 !important;
-  cursor: pointer;
-  padding: 0 #{$spacing / 2};
-  font-size: 1em;
-  transform-origin: center center;
-
-  &:focus::after {
-    outline: auto 5px -webkit-focus-ring-color;
-  }
-
-  &::before {
-    direction: ltr;
-    position: absolute;
-    content: '\f111\f111\f111\f111\f111\f111\f111';
-    font-weight: 900;
-    font-family: 'Font Awesome 5 Free';
-    display: block;
-    letter-spacing: -$spacing;
-    margin-left: $spacing * 0.5;
-    left: 50%;
-    top: 50%;
-    transform-origin: center center;
-    -webkit-transform: translate(-50%, -50%) scale(0.8);
-    transform: translate(-50%, -50%) scale(0.8);
-    width: #{$spacing * 4};
-  }
-
-  &::after {
-    line-height: 1em;
-    position: relative;
-    content: '\f111';
-    font-weight: 900;
-    padding: #{$spacing / 2};
-    font-family: 'Font Awesome 5 Free';
-    display: block;
-    transform-origin: center center;
-    animation-duration: 0.2s;
-    animation-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6);
-    animation-fill-mode: forwards;
-    filter: $slideboxShadowFilter;
-  }
-
-  &::before, &::after {
-    transition: color 0.2s ease-in-out;
-  }
-
-  &:not(.inverted) {
-    &::after {
-      @include slideboxToEndAnimation;
-    }
-
-    &.dark {
-      @include dark-colors;
-      @include dark-filters;
-    }
-
-    &.light {
-      @include light-colors;
-      @include light-filters;
-    }
-
-    @if (lightness($slideboxColorDefaultColor) > 40) {
-      @include light-colors;
-      @include light-filters;
-    } @else {
-      @include dark-colors;
-      @include dark-filters;
-    }
-
-    &:checked {
-      &::before, &::after {
-        color: inherit;
-      }
-
-      &::after {
-        @include slideboxToStartAnimation;
-      }
-    }
-
-    &:active {
-      &:checked::after {
-        @include slideboxStart(scale(1.1) !important);
-      }
-
-      &:not(:checked)::after {
-        @include slideboxEnd(scale(1.1) !important);
-      }
-    }
-  }
-
-
-  &.inverted {
-    &::before, &::after {
-      color: inherit;
-    }
-
-    &::after {
-      @include slideboxToStartAnimation;
-    }
-
-    &.dark {
-      @include dark-filters;
-    }
-
-    &.light {
-      @include light-filters;
-    }
-
-    @if (lightness($slideboxColorDefaultColor) > 40) {
-      @include light-filters;
-    } @else {
-      @include dark-filters;
-    }
-
-    &:checked {
-      &::after {
-        @include slideboxToEndAnimation;
-      }
-
-      &.dark {
-        @include dark-colors;
-      }
-
-      &.light {
-        @include light-colors;
-      }
-
-      @if (lightness($slideboxColorDefaultColor) > 40) {
-        @include light-colors;
-      } @else {
-        @include dark-colors;
-      }
-
-    }
-
-    &:active {
-      &:checked::after {
-        @include slideboxEnd(scale(1.1) !important);
-      }
-
-      &:not(:checked)::after {
-        @include slideboxStart(scale(1.1) !important);
-      }
-    }
-  }
-
-}
-
-@keyframes slideboxToLeft {
-  from {
-    @include slideboxRight;
-  }
-  to {
-    @include slideboxLeft;
-  }
-}
-
-@keyframes slideboxToRight {
-  from {
-    @include slideboxLeft;
-  }
-  to {
-    @include slideboxRight;
-  }
-}
+.slidebox {
+  --_container-width-ratio: 2;
+  --_thumb-spacing-ratio: .33;
+  --_deform: .1;
+  --_duration: 200ms;
+  --_easing-function: ease-in-out;
+  --_track: Field;
+  --_border: ButtonBorder;
+  --_off: FieldText;
+  --_on: light-dark(#0b75ff, SelectedItem);
+  appearance: none;
+  -webkit-appearance: none;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(1em * var(--_container-width-ratio));
+  height: 1em;
+  font-size: 54px;
+  padding: 0;
+  border: 1px solid var(--_border);
+  border-radius: 100vw;
+  background: var(--_track);
+  cursor: pointer;
+}
+@supports (color: AccentColor) {
+  .slidebox { --_on: AccentColor; }
+}
+.slidebox::after {
+  --_start: 0; --_end: 1;
+  content: "";
+  display: block;
+  flex: 1 1 auto;
+  min-width: 0;
+  width: calc((1 - var(--_thumb-spacing-ratio)) * 1em);
+  height: calc((1 - var(--_thumb-spacing-ratio)) * 1em);
+  margin-block: calc(var(--_thumb-spacing-ratio) * .5em);
+  margin-inline-start: calc((1em * var(--_container-width-ratio) - 1em) * var(--_start) + var(--_thumb-spacing-ratio) * .5em);
+  margin-inline-end: calc((1em * var(--_container-width-ratio) - 1em) * var(--_end) + var(--_thumb-spacing-ratio) * .5em);
+  border-radius: inherit;
+  background: var(--_off);
+  transition: background var(--_duration) var(--_easing-function), margin-inline-start var(--_duration) var(--_easing-function), margin-inline-end var(--_duration) var(--_easing-function);
+  transition-delay: 0s, 0s, calc(var(--_duration) * var(--_deform));
+}
+.slidebox:checked::after {
+  --_start: 1; --_end: 0;
+  background: var(--_on);
+  transition-delay: 0s, calc(var(--_duration) * var(--_deform)), 0s;
+}
+.slidebox:not(:checked):active::after { --_end: calc(1 - var(--_deform)); }
+.slidebox:checked:active::after { --_start: calc(1 - var(--_deform)); }
+.slidebox:disabled { cursor: not-allowed; opacity: .5; }
+@media (forced-colors: active) {
+  .slidebox { --_track: Field; --_border: ButtonBorder; --_off: FieldText; --_on: Highlight; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .slidebox::after { transition-duration: .01ms; transition-delay: 0ms; }
+}

package/dist/css/slidebox.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/slidebox.scss"],"names":[],"mappings":";AA0FA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OApG0B;EAqG1B;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,QAvImB;;AA0IrB;EACE;;AA9DO;EACP;;;AAEO;EACP;;;AAvEF;EACE;;AAGF;EACE;;AAXF;EACE;;AAqBF;EACE;;AAGF;EACE;;AAXF;EACE;;AAKF;EACE;;AAGF;EACE;;AAXF;EACE;;AAiJE;EACE;;AAnGG;EACP;;;AAEO;EACP;;;AAxBO;EANT;EACA;;;AAQS;EAfT;EACA;;;AAoBS;EArBT;EACA;;;AAuBS;EAlBT;EACA;;;AAiJE;EACE;;AAzHK;EACP;;;AAEO;EACP;;;AApEF;EACE;;AAeF;EACE;;AADF;EACE;;AAwDO;EACP;;;AAEO;EACP;;;AAvEF;EACE;;AAGF;EACE;;AAWF;EACE;;AAGF;EACE;;AALF;EACE;;AAGF;EACE;;AA0BO;EArBT;EACA;;;AAuBS;EAlBT;EACA;;;AAKS;EANT;EACA;;;AAQS;EAfT;EACA;;;AA+MF;EACE;IAjNA;IACA;;EAmNA;IA9MA;IACA;;;AAkNF;EACE;IApNA;IACA;;EAsNA;IA7NA;IACA","file":"slidebox.css"}

package/examples/simple.html

@@ -1,41 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport"
-          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>@monabbous/slidebox Simple Example</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
-          integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
-          crossorigin="anonymous"/>
-    <link rel="stylesheet" href="https://unpkg.com/@monabbous/slidebox@0.0.6/dist/css/slidebox.css"/>
-    <style>
-        body {
-            font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono", "Droid Sans Mono", monospace, monospace;
-        }
-    </style>
-</head>
-<body>
-<h2>Default Slidebox</h2>
-<div style="font-size: 2rem">
-    <input type="checkbox" class="slidebox">
-    <input type="checkbox" checked class="slidebox">
-</div>
-<h2>Custom Dark Color Slidebox</h2>
-<div style="font-size: 2rem">
-    <input style="color:#040491" type="checkbox" class="slidebox dark">
-    <input style="color:#040491" type="checkbox" checked class="slidebox dark">
-</div>
-<h2>Custom Light Color Slidebox</h2>
-<div style="font-size: 2rem">
-    <input style="color:#a8a8ff" type="checkbox" class="slidebox light">
-    <input style="color:#a8a8ff" type="checkbox" checked class="slidebox light">
-</div>
-<h2>Inverted Slidebox</h2>
-<div style="font-size: 2rem">
-    <input type="checkbox" class="slidebox inverted">
-    <input type="checkbox" checked class="slidebox inverted">
-</div>
-</body>
-</html>