@geoffcox/sterling-svelte 1.0.4 → 1.0.6

package/{Slider.svelte.d.ts → dist/Slider.svelte.d.ts}

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -51,12 +51,14 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export type SliderProps = typeof __propDef.props;
 export type SliderEvents = typeof __propDef.events;
 export type SliderSlots = typeof __propDef.slots;
 /** Slider lets the user chose a value within a min/max range by dragging a thumb button. */
-export default class Slider extends SvelteComponentTyped<SliderProps, SliderEvents, SliderSlots> {
+export default class Slider extends SvelteComponent<SliderProps, SliderEvents, SliderSlots> {
     get blur(): () => void;
     get click(): () => void;
     get focus(): (options?: FocusOptions | undefined) => void;

package/{Switch.svelte → dist/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/{Switch.svelte.d.ts → dist/Switch.svelte.d.ts}

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -59,12 +59,14 @@ declare const __propDef: {
             vertical: boolean;
         };
     };
+    exports?: undefined;
+    bindings?: undefined;
 };
 export type SwitchProps = typeof __propDef.props;
 export type SwitchEvents = typeof __propDef.events;
 export type SwitchSlots = typeof __propDef.slots;
 /** A styled HTML input type=checkbox element. */
-export default class Switch extends SvelteComponentTyped<SwitchProps, SwitchEvents, SwitchSlots> {
+export default class Switch extends SvelteComponent<SwitchProps, SwitchEvents, SwitchSlots> {
     get blur(): () => void;
     get click(): () => void;
     get focus(): (options?: FocusOptions | undefined) => void;

package/{Tab.svelte.d.ts → dist/Tab.svelte.d.ts}

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         /**
@@ -57,11 +57,13 @@ declare const __propDef: {
             variant: string;
         };
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type TabProps = typeof __propDef.props;
 export type TabEvents = typeof __propDef.events;
 export type TabSlots = typeof __propDef.slots;
-export default class Tab extends SvelteComponentTyped<TabProps, TabEvents, TabSlots> {
+export default class Tab extends SvelteComponent<TabProps, TabEvents, TabSlots> {
     get click(): () => void;
     get blur(): () => void;
     get focus(): (options?: FocusOptions | undefined) => void;

package/{TabList.svelte.d.ts → dist/TabList.svelte.d.ts}

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -53,11 +53,13 @@ declare const __propDef: {
             vertical: boolean;
         };
     };
+    exports?: undefined;
+    bindings?: undefined;
 };
 export type TabListProps = typeof __propDef.props;
 export type TabListEvents = typeof __propDef.events;
 export type TabListSlots = typeof __propDef.slots;
-export default class TabList extends SvelteComponentTyped<TabListProps, TabListEvents, TabListSlots> {
+export default class TabList extends SvelteComponent<TabListProps, TabListEvents, TabListSlots> {
     get blur(): () => void;
     get focus(): (options?: FocusOptions | undefined) => void;
     get selectFirstTab(): () => boolean;

package/{TabList.types.d.ts → dist/TabList.types.d.ts}

@@ -1,3 +1,4 @@
+/// <reference types="svelte" />
 import type { Readable, Writable } from 'svelte/store';
 /**
  * The context for a TabList and its tabs.

package/{TextArea.svelte.d.ts → dist/TextArea.svelte.d.ts}

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -52,11 +52,13 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export type TextAreaProps = typeof __propDef.props;
 export type TextAreaEvents = typeof __propDef.events;
 export type TextAreaSlots = typeof __propDef.slots;
-export default class TextArea extends SvelteComponentTyped<TextAreaProps, TextAreaEvents, TextAreaSlots> {
+export default class TextArea extends SvelteComponent<TextAreaProps, TextAreaEvents, TextAreaSlots> {
     get blur(): () => void;
     get click(): () => void;
     get focus(): (options?: FocusOptions | undefined) => void;

package/{Tooltip.svelte.d.ts → dist/Tooltip.svelte.d.ts}

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -59,10 +59,12 @@ declare const __propDef: {
             variant: string;
         };
     };
+    exports?: undefined;
+    bindings?: undefined;
 };
 export type TooltipProps = typeof __propDef.props;
 export type TooltipEvents = typeof __propDef.events;
 export type TooltipSlots = typeof __propDef.slots;
-export default class Tooltip extends SvelteComponentTyped<TooltipProps, TooltipEvents, TooltipSlots> {
+export default class Tooltip extends SvelteComponent<TooltipProps, TooltipEvents, TooltipSlots> {
 }
 export {};

package/{Tree.svelte.d.ts → dist/Tree.svelte.d.ts}

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -54,11 +54,13 @@ declare const __propDef: {
             variant: string;
         };
     };
+    exports?: undefined;
+    bindings?: undefined;
 };
 export type TreeProps = typeof __propDef.props;
 export type TreeEvents = typeof __propDef.events;
 export type TreeSlots = typeof __propDef.slots;
-export default class Tree extends SvelteComponentTyped<TreeProps, TreeEvents, TreeSlots> {
+export default class Tree extends SvelteComponent<TreeProps, TreeEvents, TreeSlots> {
     get blur(): () => void;
     get focus(): (options?: FocusOptions | undefined) => void;
 }

package/{Tree.types.d.ts → dist/Tree.types.d.ts}

@@ -1,3 +1,4 @@
+/// <reference types="svelte" />
 import type { Readable, Writable } from 'svelte/store';
 /**
  * The context for a Tree and its descendants.

package/{TreeChevron.svelte.d.ts → dist/TreeChevron.svelte.d.ts}

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -42,10 +42,12 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export type TreeChevronProps = typeof __propDef.props;
 export type TreeChevronEvents = typeof __propDef.events;
 export type TreeChevronSlots = typeof __propDef.slots;
-export default class TreeChevron extends SvelteComponentTyped<TreeChevronProps, TreeChevronEvents, TreeChevronSlots> {
+export default class TreeChevron extends SvelteComponent<TreeChevronProps, TreeChevronEvents, TreeChevronSlots> {
 }
 export {};

package/{TreeItem.svelte.d.ts → dist/TreeItem.svelte.d.ts}

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -79,12 +79,14 @@ declare const __propDef: {
             variant: string;
         };
     };
+    exports?: undefined;
+    bindings?: undefined;
 };
 export type TreeItemProps = typeof __propDef.props;
 export type TreeItemEvents = typeof __propDef.events;
 export type TreeItemSlots = typeof __propDef.slots;
 /** A item in a Tree displaying the item and children. */
-export default class TreeItem extends SvelteComponentTyped<TreeItemProps, TreeItemEvents, TreeItemSlots> {
+export default class TreeItem extends SvelteComponent<TreeItemProps, TreeItemEvents, TreeItemSlots> {
     get collapse(): () => boolean;
     get expand(): () => boolean;
     get toggleExpanded(): () => boolean;

package/{TreeItem.types.d.ts → dist/TreeItem.types.d.ts}

@@ -1,3 +1,4 @@
+/// <reference types="svelte" />
 import type { Readable } from 'svelte/store';
 /**
  * The context for a tree item and its descendants.

package/{TreeItemDisplay.svelte.d.ts → dist/TreeItemDisplay.svelte.d.ts}

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -59,11 +59,13 @@ declare const __propDef: {
             variant: string;
         };
     };
+    exports?: undefined;
+    bindings?: undefined;
 };
 export type TreeItemDisplayProps = typeof __propDef.props;
 export type TreeItemDisplayEvents = typeof __propDef.events;
 export type TreeItemDisplaySlots = typeof __propDef.slots;
-export default class TreeItemDisplay extends SvelteComponentTyped<TreeItemDisplayProps, TreeItemDisplayEvents, TreeItemDisplaySlots> {
+export default class TreeItemDisplay extends SvelteComponent<TreeItemDisplayProps, TreeItemDisplayEvents, TreeItemDisplaySlots> {
     get click(): () => void;
     get blur(): () => void;
     get focus(): (options?: FocusOptions | undefined) => void;

package/{css → dist/css}/Dialog.base.css

@@ -101,9 +101,6 @@
 }
 
 .sterling-dialog > form > .content > .footer {
-  display: flex;
-  justify-content: flex-end;
-  justify-items: flex-end;
   padding: 0.5em 1em;
   gap: 5px;
 }

package/{css → dist/css}/Label.base.css

@@ -43,7 +43,6 @@
   color: var(--stsv-common__color--secondary);
   font-size: 0.8em;
   grid-area: text;
-  margin: 0.5em 0.7em 0.2em 0.2em;
 }
 
 .sterling-label .text:empty {

package/dist/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 → dist/css}/Radio.css

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

package/{css → dist/css}/Tab.base.css

@@ -29,13 +29,14 @@
 }
 
 .sterling-tab.vertical {
-  grid-template-columns: auto 1em;
+  grid-template-columns: 1fr 1em;
   grid-template-rows: 1fr;
+  justify-content: flex-start;
+  justify-items: flex-start;
   align-content: center;
   align-items: center;
-  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 {