@geoffcox/sterling-svelte 1.0.4 → 1.0.5

package/Checkbox.svelte

@@ -1,4 +1,5 @@
 <script>import { idGenerator } from './idGenerator';
+import { usingKeyboard } from './mediaQueries/usingKeyboard';
 // ----- Props ----- //
 export let checked = false;
 export let disabled = false;
@@ -28,7 +29,12 @@ export const focus = (options) => {
 	@component
 	A styled HTML input type=checkbox element.
 -->
-<div class={`sterling-checkbox ${variant}`} class:checked class:disabled>
+<div
+  class={`sterling-checkbox ${variant}`}
+  class:checked
+  class:disabled
+  class:using-keyboard={$usingKeyboard}
+>
   <div class="container">
     <input
       bind:this={inputRef}

package/Input.svelte

@@ -44,7 +44,7 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
     <slot {disabled} {value} {variant} />
   </label>
 {/if}
-<div class={`sterling-input ${variant}`} class:disabled>
+<div class={`sterling-input ${variant}`} class:disabled class:using-keyboard={$usingKeyboard}>
   <input
     bind:this={inputRef}
     class:using-keyboard={$usingKeyboard}

package/Radio.svelte

@@ -1,4 +1,5 @@
 <script>import { idGenerator } from './idGenerator';
+import { usingKeyboard } from './mediaQueries/usingKeyboard';
 // ----- Props ----- //
 export let checked = false;
 export let disabled = false;
@@ -73,7 +74,12 @@ const onChange = (e) => {
 	@component
 	A styled HTML input type=radio element with optional label.
 -->
-<div class={`sterling-radio ${variant}`} class:disabled>
+<div
+  class={`sterling-radio ${variant}`}
+  class:checked
+  class:disabled
+  class:using-keyboard={$usingKeyboard}
+>
   <div class="container">
     <input
       bind:this={inputRef}

package/Switch.svelte

@@ -1,4 +1,5 @@
 <script>import { idGenerator } from './idGenerator';
+import { usingKeyboard } from './mediaQueries/usingKeyboard';
 // ----- Props ----- //
 export let checked = false;
 export let disabled = false;
@@ -39,7 +40,13 @@ export const focus = (options) => {
 	@component
 	A styled HTML input type=checkbox element.
 -->
-<div class={`sterling-switch ${variant}`} class:disabled class:vertical>
+<div
+  class={`sterling-switch ${variant}`}
+  class:checked
+  class:disabled
+  class:vertical
+  class:using-keyboard={$usingKeyboard}
+>
   <input
     bind:this={inputRef}
     bind:checked

package/css/Radio.button.css

@@ -0,0 +1,113 @@
+.sterling-radio.button {
+  align-content: center;
+  align-items: center;
+  background-color: var(--stsv-button__background-color);
+  border-color: var(--stsv-button__border-color);
+  border-radius: 0;
+  border-style: solid;
+  border-width: 2px;
+  box-sizing: border-box;
+  color: var(--stsv-button__color);
+  cursor: pointer;
+  display: inline-flex;
+  flex-direction: row;
+  font: inherit;
+  justify-content: center;
+  justify-items: center;
+  margin-left: -2px;
+  overflow: hidden;
+  padding: 0.5em 1em;
+  position: relative;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  transition: background-color 250ms, color 250ms, border-color 250ms;
+  white-space: nowrap;
+  user-select: none;
+}
+
+/* .sterling-radio.button:first-child {
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+  border-left-width: 2px;
+}
+
+.sterling-radio.button:last-child {
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+} */
+
+.sterling-radio.button:not(.checked):not(.disabled):hover {
+  background-color: var(--stsv-button__background-color--hover);
+  border-color: var(--stsv-button__border-color--hover);
+  color: var(--stsv-button__color--hover);
+}
+
+.sterling-radio.button.checked {
+  background-color: var(--stsv-button__background-color--active);
+  border-color: var(--stsv-button__border-color--active);
+  color: var(--stsv-button__color--active);
+}
+
+.sterling-radio.button.using-keyboard:focus-within {
+  border-color: var(--stsv-button__border-color--focus);
+  outline-color: var(--stsv-common__outline-color);
+  outline-offset: 0;
+  outline-style: solid;
+  outline-width: 2px;
+  z-index: 1;
+}
+
+.sterling-radio.button .container {
+  margin-right: 0;
+}
+
+.sterling-radio.button input {
+  height: 0;
+  width: 0;
+}
+
+.sterling-radio.button.disabled * {
+  cursor: not-allowed;
+}
+
+.sterling-radio.button.disabled::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: repeating-linear-gradient(
+    var(--stsv-common--disabled__stripe-angle),
+    var(--stsv-common--disabled__stripe-color),
+    var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
+    var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
+    var(--stsv-common--disabled__stripe-color--alt)
+      calc(2 * var(--stsv-common--disabled__stripe-width))
+  );
+  pointer-events: none;
+}
+
+.sterling-radio.button .indicator,
+.sterling-radio.button input:checked + .indicator,
+.sterling-radio.button:not(.disabled):hover .indicator,
+.sterling-radio.button input:focus-visible + .indicator {
+  display: none;
+}
+
+.sterling-radio.button .indicator::after,
+.sterling-radio.button input:checked + .indicator::after {
+  display: none;
+}
+.sterling-radio.button .container::after,
+.sterling-radio.button.disabled .container::after {
+  display: none;
+  opacity: 0;
+}
+
+@media (prefers-reduced-motion) {
+  .sterling-radio.button,
+  .sterling-radio.button::after {
+    transition: none;
+  }
+}

package/css/Radio.css

@@ -1,2 +1,3 @@
 @import url('./Radio.base.css');
 @import url('./Radio.colorful.css');
+@import url('./Radio.button.css');

package/css/Tab.base.css

@@ -36,6 +36,7 @@
   justify-content: flex-end;
   justify-items: flex-end;
   column-gap: 0.15em;
+  padding: 0.25em 1em;
 }
 
 .sterling-tab.using-keyboard:focus-visible {
@@ -82,10 +83,6 @@
   padding: 0 0.2em;
 }
 
-.sterling-tab.vertical .content .text {
-  padding-top: 0.25em;
-}
-
 /* ----- indicator -----*/
 
 .sterling-tab .indicator {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoffcox/sterling-svelte",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "author": "Geoff Cox",
   "description": "A modern, accessible, and lightweight component library for Svelte.",
   "license": "MIT",
@@ -78,6 +78,7 @@
   },
   "exports": {
     "./package.json": "./package.json",
+    "./.DS_Store": "./.DS_Store",
     "./Button.constants": "./Button.constants.js",
     "./Button.svelte": "./Button.svelte",
     "./Button.types": "./Button.types.js",
@@ -204,6 +205,7 @@
     "./css/Progress.base.css": "./css/Progress.base.css",
     "./css/Progress.css": "./css/Progress.css",
     "./css/Radio.base.css": "./css/Radio.base.css",
+    "./css/Radio.button.css": "./css/Radio.button.css",
     "./css/Radio.colorful.css": "./css/Radio.colorful.css",
     "./css/Radio.css": "./css/Radio.css",
     "./css/RgbColorSliders.base.css": "./css/RgbColorSliders.base.css",