@geoffcox/sterling-svelte 0.0.27 → 0.0.28

package/Label.svelte

@@ -1,23 +1,92 @@
-<script>export let disabled = false;
+<script>import Tooltip from "./Tooltip.svelte";
+import { usingKeyboard } from "./stores/usingKeyboard";
+let htmlFor = void 0;
+export { htmlFor as for };
+export let forwardClick = false;
+export let text = void 0;
+export let message = void 0;
+export let required = false;
+export let requiredReason = "required";
+export let status = "none";
 let labelRef;
-export const blur = () => {
-  labelRef?.blur();
+let targetDisabled = false;
+let targetRef = null;
+const findTarget = () => {
+  let candidate = null;
+  if (htmlFor) {
+    candidate = labelRef?.querySelector(`[id="${htmlFor}"]`);
+  }
+  if (!candidate) {
+    candidate = labelRef?.querySelector(
+      'a[href], audio[controls], button, details, div[contenteditable], form, input, select, textarea, video[controls], [tabindex]:not([tabindex="-1"])'
+    );
+  }
+  targetRef = candidate;
+};
+const isElementDisabled = (element) => {
+  if (element) {
+    return element.getAttribute("aria-disabled") === "true" || element?.matches(":disabled") || element?.disabled === true || element?.classList.contains("disabled");
+  }
+  return false;
 };
+$:
+  $$slots.default, labelRef, htmlFor, findTarget();
+$: {
+  targetDisabled = isElementDisabled(targetRef);
+}
+const mutationCallback = (mutations) => {
+  let disabled = void 0;
+  for (let i = 0; i < mutations.length; i++) {
+    const mutation = mutations[i];
+    if (mutation.type === "attributes") {
+      if (mutation.attributeName === "aria-disabled" || mutation.attributeName === "disabled" || mutation.attributeName === "class") {
+        if (isElementDisabled(targetRef)) {
+          disabled = true;
+          break;
+        }
+        disabled = false;
+      }
+    }
+  }
+  if (disabled !== void 0) {
+    targetDisabled = disabled;
+  }
+};
+let mutationObserver = new MutationObserver(mutationCallback);
+$: {
+  mutationObserver.disconnect();
+  if (targetRef) {
+    mutationObserver.observe(targetRef, {
+      attributes: true
+    });
+  }
+}
 export const click = () => {
   labelRef?.click();
 };
+export const blur = () => {
+  labelRef?.blur();
+};
 export const focus = (options) => {
-  labelRef?.focus();
+  labelRef?.focus(options);
+};
+const onClick = () => {
+  if (forwardClick) {
+    targetRef?.click();
+  }
 };
 </script>
 
 <label
   bind:this={labelRef}
-  aria-disabled={disabled}
+  aria-disabled={targetDisabled}
   class="sterling-label"
-  class:disabled
+  class:disabled={targetDisabled}
+  class:using-keyboard={$usingKeyboard}
+  for={htmlFor}
   on:blur
   on:click
+  on:click={onClick}
   on:copy
   on:cut
   on:dblclick
@@ -45,22 +114,151 @@ export const focus = (options) => {
   on:paste
   {...$$restProps}
 >
-  <slot {disabled} />
+  {#if text || $$slots.text}
+    <slot name="text" disabled={targetDisabled} for={htmlFor} {forwardClick} {text} {required}>
+      <div class="text">
+        {text}
+      </div>
+    </slot>
+  {/if}
+  {#if $$slots.default}
+    <div class="content">
+      <slot />
+    </div>
+  {/if}
+  {#if message}
+    <slot name="message" disabled={targetDisabled} {message} {required} {status}>
+      <div
+        class="message"
+        class:info={status === 'info'}
+        class:success={status === 'success'}
+        class:warning={status === 'warning'}
+        class:error={status === 'danger'}
+      >
+        {message}
+      </div>
+    </slot>
+  {/if}
+  {#if required}
+    <slot name="required" {requiredReason}>
+      <Tooltip showOn="hover">
+        <span class="required-reason" slot="tip">{requiredReason}</span>
+        <div class="required">*</div>
+      </Tooltip>
+    </slot>
+  {/if}
 </label>
 
 <style>
-  label {
-    color: var(--stsv-common__color);
-    transition: color 250ms;
+  .sterling-label {
+    background-color: var(--stsv-input__background-color);
+    border-color: var(--stsv-input__border-color);
+    border-radius: var(--stsv-input__border-radius);
+    border-style: var(--stsv-input__border-style);
+    border-width: var(--stsv-input__border-width);
+    box-sizing: border-box;
+    color: var(--stsv-input__color);
+    display: flex;
+    flex-direction: column;
     font: inherit;
+    margin: 0;
+    overflow: visible;
+    padding: 0;
+    position: relative;
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+  }
+
+  .sterling-label:not(.disabled):hover {
+    background-color: var(--stsv-input__background-color--hover);
+    border-color: var(--stsv-input__border-color--hover);
+    color: var(--stsv-input__color--hover);
+  }
+
+  .sterling-label.using-keyboard:focus-within {
+    border-color: var(--stsv-input__border-color--focus);
+    color: var(--stsv-input__color--focus);
+    outline-color: var(--stsv-common__outline-color);
+    outline-offset: var(--stsv-common__outline-offset);
+    outline-style: var(--stsv-common__outline-style);
+    outline-width: var(--stsv-common__outline-width);
+  }
+
+  .sterling-label.disabled {
+    cursor: not-allowed;
+  }
+
+  .sterling-label.disabled * {
+    cursor: not-allowed;
+  }
+
+  .text {
+    color: var(--stsv-common__color--secondary);
+    font-size: 0.8em;
+    margin: 0.5em 0.7em 0.2em 0.2em;
+  }
+
+  .text:empty {
+    margin: 0;
+  }
+
+  .content {
+    display: grid;
+  }
+
+  .message {
+    box-sizing: border-box;
+    font-size: 0.8em;
+    background-color: var(--stsv-common__background-color--secondary);
+    color: var(--stsv-common__color--secondary);
+    padding: 0.5em;
+    width: 100%;
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+  }
+
+  .message.info {
+    background-color: var(--stsv-status--info__background-color);
+    border-color: var(--stsv-status--info__border-color);
+    color: var(--stsv-status--info__color);
+  }
+
+  .message.success {
+    background-color: var(--stsv-status--success__background-color);
+    border-color: var(--stsv-status--success__border-color);
+    color: var(--stsv-status--success__color);
+  }
+
+  .message.warning {
+    background-color: var(--stsv-status--warning__background-color);
+    border-color: var(--stsv-status--warning__border-color);
+    color: var(--stsv-status--warning__color);
+  }
+
+  .message.error {
+    background-color: var(--stsv-status--danger__background-color);
+    border-color: var(--stsv_--danger-color);
+    color: var(--stsv-status--danger__color);
+  }
+
+  .required {
+    text-align: center;
+    font-weight: bold;
+    box-sizing: border-box;
+    width: 1em;
+    height: 1em;
+    position: absolute;
+    top: 0;
+    right: 0;
   }
 
-  label.disabled {
-    color: var(--stsv-common__color--disabled);
+  .required-reason {
+    display: block;
+    padding: 4px;
   }
 
   @media (prefers-reduced-motion) {
-    label {
+    .sterling-label,
+    .sterling-label::after,
+    .message {
       transition: none;
     }
   }

package/Label.svelte.d.ts

@@ -2,9 +2,15 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        disabled?: boolean | undefined;
-        blur?: (() => void) | undefined;
+        for?: string | undefined;
+        forwardClick?: boolean | undefined;
+        text?: string | undefined;
+        message?: string | undefined;
+        required?: boolean | undefined;
+        requiredReason?: string | undefined;
+        status?: string | undefined;
         click?: (() => void) | undefined;
+        blur?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;
     };
     events: {
@@ -39,8 +45,22 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {
+        text: {
+            disabled: boolean;
+            for: string | undefined;
+            forwardClick: boolean;
+            text: string | undefined;
+            required: boolean;
+        };
+        default: {};
+        message: {
             disabled: boolean;
+            message: string | undefined;
+            required: boolean;
+            status: string;
+        };
+        required: {
+            requiredReason: string;
         };
     };
 };
@@ -48,8 +68,8 @@ export type LabelProps = typeof __propDef.props;
 export type LabelEvents = typeof __propDef.events;
 export type LabelSlots = typeof __propDef.slots;
 export default class Label extends SvelteComponentTyped<LabelProps, LabelEvents, LabelSlots> {
-    get blur(): () => void;
     get click(): () => void;
+    get blur(): () => void;
     get focus(): (options?: FocusOptions | undefined) => void;
 }
 export {};

package/Label.types.d.ts

@@ -0,0 +1,4 @@
+import type { LABEL_STATUSES } from './Label.constants';
+type LabelStatusTuple = typeof LABEL_STATUSES;
+export type LabelStatus = LabelStatusTuple[number];
+export {};

package/Link.svelte

@@ -1,6 +1,6 @@
-<script>export let colorful = false;
-export let href;
+<script>export let href;
 export let disabled = false;
+export let colorful = false;
 export let variant = "regular";
 let linkRef;
 export const blur = () => {

package/Link.svelte.d.ts

@@ -2,9 +2,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        colorful?: boolean | undefined;
         href: string;
         disabled?: boolean | undefined;
+        colorful?: boolean | undefined;
         variant?: string | undefined;
         blur?: (() => void) | undefined;
         click?: (() => void) | undefined;

package/List.svelte

@@ -299,11 +299,12 @@ A list of items where a single item can be selected.
 
   .container::after {
     background: repeating-linear-gradient(
-      45deg,
-      var(--stsv-common__background-color1--disabled),
-      var(--stsv-common__background-color1--disabled) 3px,
-      var(--stsv-common__background-color2--disabled) 3px,
-      var(--stsv-common__background-color2--disabled) 6px
+      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))
     );
     content: '';
     bottom: 0;

package/ListItem.svelte

@@ -1,6 +1,6 @@
 <script>import { getContext } from "svelte";
-import { LIST_CONTEXT_KEY } from "./List.constants";
 import { readable, writable } from "svelte/store";
+import { LIST_CONTEXT_KEY } from "./List.constants";
 export let disabled = false;
 export let value;
 const {
@@ -116,11 +116,12 @@ export const focus = (options) => {
 
   .sterling-list-item::after {
     background: repeating-linear-gradient(
-      45deg,
-      var(--stsv-common__background-color1--disabled),
-      var(--stsv-common__background-color1--disabled) 3px,
-      var(--stsv-common__background-color2--disabled) 3px,
-      var(--stsv-common__background-color2--disabled) 6px
+      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: '';

package/MenuButton.svelte

@@ -7,9 +7,7 @@ import { idGenerator } from "./idGenerator";
 import Popover from "./Popover.svelte";
 import { clickOutside } from "./actions/clickOutside";
 export let open = false;
-export let shape = "rounded";
 export let value;
-export let variant = "regular";
 const instanceId = idGenerator.nextId("MenuButton");
 let buttonRef;
 let reference;
@@ -99,8 +97,6 @@ setContext(MENU_ITEM_CONTEXT_KEY, {
   aria-owns={menuId}
   data-value={value}
   data-root-value={value}
-  {variant}
-  {shape}
   on:blur
   on:click
   on:click={onClick}

package/MenuButton.svelte.d.ts

@@ -3,9 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         open?: boolean | undefined;
-        shape?: "circular" | "rounded" | "square" | undefined;
         value: string;
-        variant?: "regular" | "outline" | "ghost" | undefined;
         click?: (() => void) | undefined;
         blur?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;
@@ -50,8 +48,8 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            shape: "circular" | "rounded" | "square";
-            variant: "regular" | "outline" | "ghost";
+            shape: any;
+            variant: any;
         };
         items: {};
     };

package/MenuItem.svelte

@@ -19,9 +19,9 @@ export let checked = false;
 export let colorful = false;
 export let composed = false;
 export let disabled = false;
-export let value;
 export let role = "menuitem";
 export let text = void 0;
+export let value;
 const {
   isMenuBarItem,
   openValues = writable([]),

package/MenuItem.svelte.d.ts

@@ -6,9 +6,9 @@ declare const __propDef: {
         colorful?: boolean | undefined;
         composed?: boolean | undefined;
         disabled?: boolean | undefined;
-        value: string;
         role?: "menuitem" | "menuitemcheckbox" | "menuitemradio" | undefined;
         text?: string | undefined;
+        value: string;
         blur?: (() => void) | undefined;
         click?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;

package/MenuItemDisplay.svelte

@@ -104,11 +104,12 @@ export let menuItemRole = "menuitem";
 
   .sterling-menu-item-display::after {
     background: repeating-linear-gradient(
-      45deg,
-      var(--stsv-common__background-color1--disabled),
-      var(--stsv-common__background-color1--disabled) 3px,
-      var(--stsv-common__background-color2--disabled) 3px,
-      var(--stsv-common__background-color2--disabled) 6px
+      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: '';

package/Progress.constants.d.ts

@@ -1 +1 @@
-export declare const PROGRESS_COLORFULS: string[];
+export declare const PROGRESS_STATUSES: string[];

package/Progress.constants.js

@@ -1 +1 @@
-export const PROGRESS_COLORFULS = ['none', 'auto', 'info', 'success', 'warning', 'error'];
+export const PROGRESS_STATUSES = ['none', 'auto', 'info', 'success', 'warning', 'danger'];

package/Progress.svelte

@@ -2,7 +2,7 @@
 export let max = 100;
 export let percent = 0;
 export let vertical = false;
-export let colorful = "none";
+export let status = "none";
 export let disabled = false;
 let clientHeight;
 let clientWidth;
@@ -22,7 +22,7 @@ $:
 $:
   indicatorStyle = vertical ? `height: ${percentHeight}px` : `width: ${percentWidth}px`;
 $:
-  indicatorColor = colorful === "auto" ? percent === 100 ? "success" : "info" : colorful;
+  indicatorColor = status === "auto" ? percent === 100 ? "success" : "info" : status;
 </script>
 
 <!--
@@ -76,7 +76,7 @@ $:
       class:info={indicatorColor === 'info'}
       class:success={indicatorColor === 'success'}
       class:warning={indicatorColor === 'warning'}
-      class:error={indicatorColor === 'error'}
+      class:error={indicatorColor === 'danger'}
       style={indicatorStyle}
     />
   </div>
@@ -84,22 +84,39 @@ $:
 
 <style>
   .sterling-progress {
-    display: inline-flex;
-    flex-direction: column;
     align-content: flex-start;
     align-items: flex-start;
-    display: block;
     background: var(--stsv-common__background-color);
-    box-sizing: border-box;
-    height: 1em;
-    padding: 0.25em;
     border-width: var(--stsv-common__border-width);
     border-style: var(--stsv-common__border-style);
     border-color: var(--stsv-common__border-color);
     border-radius: var(--stsv-common__border-radius);
+    box-sizing: border-box;
+    display: block;
+    height: 1em;
+    padding: 0.25em;
+    position: relative;
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
+  .sterling-progress.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;
+  }
+
   .container {
     display: flex;
     justify-content: flex-start;
@@ -152,18 +169,7 @@ $:
   }
 
   .indicator.error {
-    background-color: var(--stsv-status--error__border-color);
-  }
-
-  /* ----- Disabled ----- */
-
-  .sterling-progress.disabled {
-    background: var(--stsv-common__background-color--disabled);
-    border-color: var(--stsv-common__border-color--disabled);
-  }
-
-  .sterling-progress.disabled .indicator {
-    background-color: var(--stsv-common__color--disabled);
+    background-color: var(--stsv-status--danger__border-color);
   }
 
   @media (prefers-reduced-motion) {

package/Progress.svelte.d.ts

@@ -6,7 +6,7 @@ declare const __propDef: {
         max?: number | undefined;
         percent?: number | undefined;
         vertical?: boolean | undefined;
-        colorful?: string | undefined;
+        status?: string | undefined;
         disabled?: boolean | undefined;
     };
     events: {

package/Progress.types.d.ts

@@ -1,4 +1,4 @@
-import type { PROGRESS_COLORFULS } from './Progress.constants';
-type ProgressColorfulTuple = typeof PROGRESS_COLORFULS;
-export type ProgressColorful = ProgressColorfulTuple[number];
+import type { PROGRESS_STATUSES } from './Progress.constants';
+type ProgressStatusTuple = typeof PROGRESS_STATUSES;
+export type ProgressStatus = ProgressStatusTuple[number];
 export {};

package/Radio.svelte

@@ -1,10 +1,9 @@
 <script>import { idGenerator } from "./idGenerator";
-import Label from "./Label.svelte";
-export let colorful = false;
 export let checked = false;
 export let disabled = false;
 export let group = void 0;
 export let id = void 0;
+export let colorful = false;
 if (checked && $$restProps.value !== group) {
   group = $$restProps.value;
 } else if (!checked && $$restProps.value === group) {
@@ -100,11 +99,9 @@ const onChange = (e) => {
     <div class="indicator" />
   </div>
   {#if $$slots.default}
-    <Label {disabled} for={id}>
-      <slot {checked} {disabled} {group} inputId={id} value={$$restProps.value}>
-        {$$restProps.value}
-      </slot>
-    </Label>
+    <label for={id}>
+      <slot {colorful} {checked} {disabled} {group} inputId={id} value={$$restProps.value} />
+    </label>
   {/if}
 </div>
 
@@ -226,11 +223,12 @@ const onChange = (e) => {
 
   .container::after {
     background: repeating-linear-gradient(
-      45deg,
-      var(--stsv-common__background-color1--disabled),
-      var(--stsv-common__background-color1--disabled) 3px,
-      var(--stsv-common__background-color2--disabled) 3px,
-      var(--stsv-common__background-color2--disabled) 6px
+      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))
     );
     border-radius: 10000px;
     bottom: 0;
@@ -244,6 +242,12 @@ const onChange = (e) => {
     transition: opacity 250ms;
   }
 
+  label {
+    color: var(--stsv-common__color);
+    transition: color 250ms;
+    font: inherit;
+  }
+
   .sterling-radio.disabled .container::after {
     opacity: 1;
   }
@@ -251,7 +255,8 @@ const onChange = (e) => {
   @media (prefers-reduced-motion) {
     .indicator,
     .indicator::after,
-    .container::after {
+    .container::after,
+    label {
       transition: none;
     }
   }

package/Radio.svelte.d.ts

@@ -2,11 +2,11 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        colorful?: boolean | undefined;
         checked?: boolean | undefined;
         disabled?: boolean | undefined;
         group?: any | undefined | null;
         id?: string | undefined;
+        colorful?: boolean | undefined;
         blur?: (() => void) | undefined;
         click?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;
@@ -42,6 +42,7 @@ declare const __propDef: {
     };
     slots: {
         default: {
+            colorful: boolean;
             checked: boolean;
             disabled: boolean;
             group: any;