@geoffcox/sterling-svelte 1.0.10 → 1.0.12

package/dist/Callout.svelte

@@ -14,7 +14,7 @@ export let mainAxisOffset = 0;
 /** When true, the callout is open and visible. */
 export let open = false;
 /** How the callout should be positioned relative to the reference element. */
-export let placement = 'bottom-start';
+export let placement = 'top-start';
 /** The host container for the callout. */
 export let portalHost = undefined;
 /** The reference to the element anchoring the position of the callout. */
@@ -83,9 +83,7 @@ const getArrowPlacementStyle = (position) => {
             case 'top':
             case 'top-start':
             case 'top-end':
-                return (`bottom: -${arrowRef.offsetWidth}px;` +
-                    `filter: drop-shadow(-1px -2px 1px rgba(0,0,0,0.2));` +
-                    `transform:translate(0, -50%) rotate(135deg);`);
+                return (`bottom: -${arrowRef.offsetWidth}px;` + `transform:translate(0, -50%) rotate(135deg);`);
             case 'right':
             case 'right-start':
             case 'right-end':
@@ -97,9 +95,7 @@ const getArrowPlacementStyle = (position) => {
             case 'left':
             case 'left-start':
             case 'left-end':
-                return (`right: -${arrowRef.offsetWidth}px;` +
-                    `filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.2));` +
-                    `transform:translate(-50%, 0) rotate(45deg);`);
+                return (`right: -${arrowRef.offsetWidth}px;` + `transform:translate(-50%, 0) rotate(45deg);`);
         }
     }
     return '';
@@ -155,6 +151,18 @@ ensurePortalHost();
       bind:this={popupRef}
       class={`sterling-callout ${variant}`}
       class:open
+      class:top={popupPosition.placement === 'top'}
+      class:top-start={popupPosition.placement === 'top-start'}
+      class:top-end={popupPosition.placement === 'top-end'}
+      class:right={popupPosition.placement === 'right'}
+      class:right-start={popupPosition.placement === 'right-start'}
+      class:right-end={popupPosition.placement === 'right-end'}
+      class:bottom={popupPosition.placement === 'bottom'}
+      class:bottom-start={popupPosition.placement === 'bottom-start'}
+      class:bottom-end={popupPosition.placement === 'bottom-end'}
+      class:left={popupPosition.placement === 'left'}
+      class:left-start={popupPosition.placement === 'left-start'}
+      class:left-end={popupPosition.placement === 'left-end'}
       role="tooltip"
       on:blur
       on:click

package/dist/ColorPicker.svelte

@@ -1,5 +1,5 @@
 <script>import { tick } from 'svelte';
-import tinycolor from '@ctrl/tinycolor';
+import { TinyColor } from '@ctrl/tinycolor';
 import Dropdown from './Dropdown.svelte';
 import Input from './Input.svelte';
 import Tab from './Tab.svelte';
@@ -22,6 +22,10 @@ export let disabled = false;
 export let open = false;
 /** Additional class names to apply. */
 export let variant = '';
+/** Additional class names to apply to the value input. */
+export let valueVariant = '';
+/** Additional class names to apply to sliders. */
+export let sliderVariant = '';
 // ----- State ----- //
 let hue = 0;
 let saturation = 0;
@@ -41,7 +45,7 @@ const updateFromRgb = async () => {
         if (!updating && (colorFormat === 'hex' || colorFormat === 'rgb')) {
             updating = true;
             const newAlpha = colorFormat === 'hex' ? hexAlpha / 255 : alpha;
-            const color = tinycolor({ r: red, g: green, b: blue, a: newAlpha });
+            const color = new TinyColor({ r: red, g: green, b: blue, a: newAlpha });
             const hsl = color.toHsl();
             hue = Math.round(hsl.h);
             saturation = Math.round(hsl.s * 100);
@@ -66,7 +70,7 @@ const updateFromHsl = async () => {
     if (globalThis.window) {
         if (!updating && colorFormat === 'hsl') {
             updating = true;
-            const color = tinycolor({ h: hue, s: saturation / 100, l: lightness / 100, a: alpha });
+            const color = new TinyColor({ h: hue, s: saturation / 100, l: lightness / 100, a: alpha });
             const rgb = color.toRgb();
             red = rgb.r;
             green = rgb.g;
@@ -81,7 +85,7 @@ const updateFromHsl = async () => {
 const updateColorsFromText = async () => {
     // tinycolor requires window
     if (globalThis.window) {
-        const color = tinycolor(colorText);
+        const color = new TinyColor(colorText);
         if (color.isValid) {
             if (!updating) {
                 updating = true;
@@ -144,13 +148,13 @@ $: {
 }
 // ----- Event handlers ----- //
 const onInputBlur = async () => {
-    if (globalThis.window && tinycolor) {
+    if (globalThis.window) {
         if (!updating) {
             if (colorText.trim().length === 0) {
                 colorText = defaultColorText;
                 return;
             }
-            const color = tinycolor(colorText);
+            const color = new TinyColor(colorText);
             if (color.isValid) {
                 updating = true;
                 switch (colorFormat) {
@@ -234,6 +238,7 @@ updateColorsFromText();
     on:mouseup
     on:wheel
     on:paste
+    {variant}
     {...$$restProps}
   >
     <div class="value" slot="value">
@@ -245,7 +250,7 @@ updateColorsFromText();
         on:click={onInputClick}
         on:keydown={onInputKeydown}
         spellcheck="false"
-        variant={`composed ${variant}`}
+        variant={`composed ${valueVariant}`}
       />
     </div>
     <div class="sterling-color-picker-popup" use:trapKeyboardFocus>
@@ -258,11 +263,23 @@ updateColorsFromText();
       </div>
       <div class="sliders">
         {#if colorFormat === 'rgb'}
-          <RgbColorSliders bind:red bind:green bind:blue bind:alpha />
+          <RgbColorSliders bind:red bind:green bind:blue bind:alpha variant={sliderVariant} />
         {:else if colorFormat === 'hex'}
-          <HexColorSliders bind:red bind:green bind:blue bind:alpha={hexAlpha} />
+          <HexColorSliders
+            bind:red
+            bind:green
+            bind:blue
+            bind:alpha={hexAlpha}
+            variant={sliderVariant}
+          />
         {:else if colorFormat === 'hsl'}
-          <HslColorSliders bind:hue bind:saturation bind:lightness bind:alpha />
+          <HslColorSliders
+            bind:hue
+            bind:saturation
+            bind:lightness
+            bind:alpha
+            variant={sliderVariant}
+          />
         {/if}
       </div>
     </div>

package/dist/ColorPicker.svelte.d.ts

@@ -7,6 +7,8 @@ declare const __propDef: {
         disabled?: boolean | undefined;
         open?: boolean | undefined;
         variant?: string | undefined;
+        valueVariant?: string | undefined;
+        sliderVariant?: string | undefined;
     };
     events: {
         blur: FocusEvent;

package/dist/Dialog.svelte

@@ -39,17 +39,18 @@ const showDialog = () => {
     if (dialogRef?.open === false) {
         // when open, track clicks outside the dialog (use capture = true)
         document.addEventListener('click', onDocumentClick, true);
+        returnValue = '';
         dialogRef.showModal();
     }
     open = true;
 };
-const closeDialog = (returnValue = '') => {
+const closeDialog = async () => {
     if (dialogRef?.open === true) {
         // when closed, stop tracking clicks outside the dialog
         document.removeEventListener('click', onDocumentClick);
         // to allow time for the CSS transition animation, closing the dialog is delayed
         closing = true;
-        tick();
+        await tick();
         setTimeout(() => {
             dialogRef.close(returnValue);
             open = false;
@@ -73,6 +74,7 @@ const onCancel = (event) => {
     // To allow animation with closeDialog, this event is canceled.
     event.preventDefault();
     event.stopPropagation();
+    returnValue = '';
     closeDialog();
     return false;
 };
@@ -84,9 +86,11 @@ const onSubmit = (event) => {
     const anyEvent = event;
     if (anyEvent?.submitter.type === 'submit') {
         if (dialogRef.open) {
-            closeDialog(anyEvent?.submitter.value ?? '');
+            const eventSubmitter = anyEvent?.submitter;
+            returnValue = eventSubmitter?.value ?? '';
+            closeDialog();
             setTimeout(() => {
-                formRef.requestSubmit(anyEvent?.submitter);
+                formRef.requestSubmit(eventSubmitter);
             }, dialogFadeDuration);
             event.preventDefault();
             return false;
@@ -97,11 +101,6 @@ const onSubmit = (event) => {
         return false;
     }
 };
-const onClose = (event) => {
-    // This event is not cancelable.
-    // Update the returnValue whenever the dialog closes.
-    returnValue = dialogRef.returnValue;
-};
 $: {
     updateDialog(open);
 }
@@ -110,10 +109,8 @@ onMount(() => {
     // Use the dialog for any element portals
     portalHostStore.set(dialogRef);
     dialogRef.addEventListener('cancel', onCancel);
-    dialogRef.addEventListener('close', onClose);
     return () => {
         dialogRef?.removeEventListener('cancel', onCancel);
-        dialogRef?.removeEventListener('close', onClose);
         portalHostStore.set(undefined);
     };
 });

package/dist/Dropdown.svelte

@@ -4,6 +4,7 @@ import { clickOutside } from './actions/clickOutside';
 import { idGenerator } from './idGenerator';
 import { prefersReducedMotion } from './mediaQueries/prefersReducedMotion';
 import { slide } from 'svelte/transition';
+import { usingKeyboard } from './mediaQueries/usingKeyboard';
 const popupId = idGenerator.nextId('Dropdown-popup');
 // ----- Props ----- //
 /** Disables the dropdown. */
@@ -79,6 +80,8 @@ $: slideMotion = !$prefersReducedMotion ? slide : slideNoOp;
   aria-expanded={open}
   class={`sterling-dropdown ${variant}`}
   class:disabled
+  class:open
+  class:using-keyboard={$usingKeyboard}
   role="combobox"
   tabindex="0"
   use:clickOutside={{ ignoreOthers: [popupContentRef] }}
@@ -126,7 +129,7 @@ $: slideMotion = !$prefersReducedMotion ? slide : slideNoOp;
     </div>
   </slot>
 
-  <Popover reference={dropdownRef} open={!disabled && open}>
+  <Popover reference={dropdownRef} open={!disabled && open} placement="bottom-start">
     <div
       class={`sterling-dropdown-popup-content ${variant}`}
       transition:slideMotion|global={{ duration: 200 }}

package/dist/HslColorSliders.svelte

@@ -4,11 +4,11 @@ import Slider from './Slider.svelte';
 import { round } from 'lodash-es';
 // ----- Props ----- //
 /** The hue value. */
-export let hue = 180;
+export let hue = 0;
 /** The saturation value. */
-export let saturation = 100;
+export let saturation = 0;
 /** The lightness value. */
-export let lightness = 50;
+export let lightness = 0;
 /** The alpha value. */
 export let alpha = 1;
 /** Additional class names to apply. */

package/dist/List.svelte

@@ -114,7 +114,6 @@ export const selectNextItem = () => {
 };
 export const selectLastItem = () => {
     let candidate = listRef?.querySelector('[data-value][role=listitem]:last-of-type');
-    console.log('in selectLastItem', candidate);
     while (candidate && !isElementListItem(candidate)) {
         candidate = candidate.previousElementSibling;
     }

package/dist/MenuButton.svelte

@@ -7,14 +7,11 @@ import { idGenerator } from './idGenerator';
 import Popover from './Popover.svelte';
 import { clickOutside } from './actions/clickOutside';
 // ----- Props ----- //
-/** When true, the menu is open. */
 export let open = false;
-/** The value uniquely identifying this menu button as the root of the menu hierarchy. */
+export let menuVariant = '';
+export let popoverPlacement = 'bottom-start';
 export let value;
-/** Additional class names to apply. */
 export let variant = '';
-/** Additional class names to apply to the Menu*/
-export let menuVariant = '';
 // ----- State ----- //
 const instanceId = idGenerator.nextId('MenuButton');
 let buttonRef;
@@ -66,7 +63,6 @@ $: {
     }
     prevOpen = open;
 }
-// ----- Event Handlers ----- //
 const closeAllMenus = () => {
     openValues.set([]);
 };
@@ -81,7 +77,7 @@ const onClickOutside = (event) => {
     }
     closeAllMenus?.();
 };
-// ----- Set Context ----- //
+// ----- Context ----- //
 setContext(MENU_ITEM_CONTEXT_KEY, {
     depth: 1,
     openValues,
@@ -95,10 +91,6 @@ setContext(MENU_ITEM_CONTEXT_KEY, {
 });
 </script>
 
-<!--
-      @component
-      A Button that displays a context menu when clicked.
-  -->
 <Button
   bind:this={buttonRef}
   aria-controls={menuId}
@@ -145,7 +137,7 @@ setContext(MENU_ITEM_CONTEXT_KEY, {
   <div class="reference" bind:this={reference} use:clickOutside on:click_outside={onClickOutside}>
     <slot {open} {value} {variant} />
   </div>
-  <Popover {reference} {open}>
+  <Popover {reference} {open} placement={popoverPlacement}>
     <Menu bind:this={menuRef} id={menuId} {reference} {open} variant={menuVariant}>
       <slot name="items" />
     </Menu>

package/dist/MenuButton.svelte.d.ts

@@ -3,9 +3,10 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         open?: boolean | undefined;
+        menuVariant?: string | undefined;
+        popoverPlacement?: string | undefined;
         value: string;
         variant?: string | undefined;
-        menuVariant?: string | undefined;
         click?: (() => void) | undefined;
         blur?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;
@@ -62,7 +63,6 @@ declare const __propDef: {
 export type MenuButtonProps = typeof __propDef.props;
 export type MenuButtonEvents = typeof __propDef.events;
 export type MenuButtonSlots = typeof __propDef.slots;
-/** A Button that displays a context menu when clicked. */
 export default class MenuButton extends SvelteComponent<MenuButtonProps, MenuButtonEvents, MenuButtonSlots> {
     get click(): () => void;
     get blur(): () => void;

package/dist/MenuItem.types.d.ts

@@ -11,7 +11,7 @@ export type MenuItemRegistration = {
 };
 export type MenuItemContext = {
     /**
-     * If the menu item is a top-elvel item in a menu bar
+     * If the menu item is a top-level item in a menu bar
      */
     isMenuBarItem?: boolean;
     /**

package/dist/Popover.svelte

@@ -12,7 +12,7 @@ export let mainAxisOffset = 0;
 /** When true, the popover is open and visible. */
 export let open = false;
 /** How the popover should be positioned relative to the reference element. */
-export let placement = 'bottom-start';
+export let placement = 'top-start';
 /** The host container for the callout. */
 export let portalHost = undefined;
 /** The reference to the element anchoring the position of the popover. */

package/dist/TextArea.svelte

@@ -1,4 +1,4 @@
-<script>import { onMount } from 'svelte';
+<script>import { onMount, tick } from 'svelte';
 // ----- Props ----- //
 export let disabled = false;
 export let value = '';
@@ -10,6 +10,24 @@ export let resize = 'none';
 export let variant = '';
 // ----- State ----- //
 let textAreaRef;
+const correctResize = async () => {
+    console.log('correctResize');
+    await tick();
+    setTimeout(() => {
+        if (autoHeight) {
+            if (resize === 'both') {
+                console.warn('The resize property cannot be set to "both" when autoHeight is true. The resize property will be set to "horizontal".');
+                resize = 'horizontal';
+            }
+            if (resize === 'vertical') {
+                console.warn('The resize property cannot be set to "vertical" when autoHeight is true. The resize property will be set to "none".');
+                resize = 'none';
+            }
+        }
+    }, 0);
+};
+$: autoHeight, resize, correctResize();
+// ----- autoHeight ----- //
 const autoSetHeight = () => {
     if (autoHeight && textAreaRef) {
         // the style must be directly set to avoid re-rendering looping latency
@@ -18,11 +36,11 @@ const autoSetHeight = () => {
         textAreaRef.style.height = `${textAreaRef.scrollHeight}px`;
     }
 };
+$: autoHeight, autoSetHeight();
 // ----- Event Handlers ----- //
 const onInput = () => {
     autoSetHeight();
 };
-$: autoHeight, autoSetHeight();
 onMount(() => {
     autoSetHeight();
 });

package/dist/Tooltip.svelte

@@ -6,7 +6,7 @@ export let conditionalRender = true;
 export let crossAxisOffset = 0;
 export let mainAxisOffset = 0;
 export let open = false;
-export let placement = 'bottom-start';
+export let placement = 'top-start';
 export let portalHost = undefined;
 export let variant = '';
 /** When true, the tooltip is disabled and will not be shown. */

package/dist/css/Button.base.css

@@ -19,7 +19,10 @@
   padding: 0.5em 1em;
   text-decoration: none;
   text-overflow: ellipsis;
-  transition: background-color 250ms, color 250ms, border-color 250ms;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
   white-space: nowrap;
   user-select: none;
 }
@@ -44,29 +47,6 @@
   outline-width: 2px;
 }
 
-.sterling-button:disabled {
-  cursor: not-allowed;
-  position: relative;
-}
-
-.sterling-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;
-}
-
 @media (prefers-reduced-motion) {
   .sterling-button {
     transition: none;

package/dist/css/Button.css

@@ -5,3 +5,4 @@
 @import url('./Button.secondary.colorful.css');
 @import url('./Button.tool.css');
 @import url('./Button.tool.colorful.css');
+@import url('./Button.disabled.css');

package/dist/css/Button.disabled.css

@@ -0,0 +1,22 @@
+.sterling-button:disabled {
+  cursor: not-allowed;
+  position: relative;
+}
+
+.sterling-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;
+}

package/dist/css/Callout.base.css

@@ -41,3 +41,15 @@
   /* The -100% and 200% allow for the drop-shadow to not be clipped */
   clip-path: polygon(-100% -100%, 200% -100%, 200% 200%, -100% -100%);
 }
+
+.sterling-callout.top-start .arrow,
+.sterling-callout.top .arrow,
+.sterling-callout.top-end .arrow {
+  filter: drop-shadow(-1px -2px 1px rgba(0, 0, 0, 0.2));
+}
+
+.sterling-callout.left-start .arrow,
+.sterling-callout.left .arrow,
+.sterling-callout.left-end .arrow {
+  filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.2));
+}

package/dist/css/Checkbox.base.css

@@ -50,7 +50,10 @@ and there is not a parent CSS selector.
   display: inline-block;
   height: 20px;
   position: relative;
-  transition: background-color 250ms, color 250ms, border-color 250ms;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
   width: 20px;
   pointer-events: none;
 }
@@ -87,7 +90,9 @@ The checkmark is a rotated L centered in the box.
   top: 45%;
   transform: translate(-50%, -50%) rotate(45deg);
   transform-origin: center;
-  transition: border-color 250ms, opacity 150ms;
+  transition:
+    border-color 250ms,
+    opacity 150ms;
   width: 7px;
   opacity: 0;
 }
@@ -100,41 +105,12 @@ The checkmark is a rotated L centered in the box.
   border-color: var(--stsv-input__color--hover);
 }
 
-.sterling-checkbox.disabled,
-.sterling-checkbox.disabled input {
-  cursor: not-allowed;
-}
-
-.sterling-checkbox .container::after {
-  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))
-  );
-  bottom: 0;
-  content: '';
-  left: 0;
-  opacity: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  pointer-events: none;
-  transition: opacity 250ms;
-}
-
 .sterling-checkbox > label {
   color: var(--stsv-common__color);
   transition: color 250ms;
   font: inherit;
 }
 
-.sterling-checkbox.disabled .container::after {
-  opacity: 1;
-}
-
 @media (prefers-reduced-motion) {
   .sterling-checkbox .indicator,
   .sterling-checkbox .indicator::after,

package/dist/css/Checkbox.css

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

package/dist/css/Checkbox.disabled.css

@@ -0,0 +1,28 @@
+.sterling-checkbox.disabled,
+.sterling-checkbox.disabled input {
+  cursor: not-allowed;
+}
+
+.sterling-checkbox .container::after {
+  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))
+  );
+  bottom: 0;
+  content: '';
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  pointer-events: none;
+  transition: opacity 250ms;
+}
+
+.sterling-checkbox.disabled .container::after {
+  opacity: 1;
+}

package/dist/css/Dropdown.base.css

@@ -14,7 +14,10 @@
   overflow: hidden;
   padding: 0;
   position: relative;
-  transition: background-color 250ms, color 250ms, border-color 250ms;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
 }
 
 .sterling-dropdown:hover {
@@ -33,51 +36,6 @@
   outline-width: 2px;
 }
 
-.sterling-dropdown.disabled {
-  cursor: not-allowed;
-  outline: none;
-}
-
-.sterling-dropdown.disabled .button {
-  cursor: not-allowed;
-}
-
-.sterling-dropdown::after {
-  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))
-  );
-  bottom: 0;
-  content: '';
-  left: 0;
-  opacity: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  pointer-events: none;
-  transition: opacity 250ms;
-}
-
-.sterling-dropdown.disabled::after {
-  opacity: 1;
-}
-
-.sterling-dropdown.composed,
-.sterling-dropdown.composed:hover,
-.sterling-dropdown.composed.focus {
-  background: none;
-  border: none;
-  outline: none;
-}
-
-.sterling-dropdown.composed.disabled::after {
-  opacity: 0;
-}
-
 .sterling-dropdown > .value {
   overflow: hidden;
 }