@sveltia/ui 0.7.4 → 0.7.5

package/package/components/text-field/number-input.svelte

@@ -32,12 +32,12 @@
    */
   export let readonly = false;
   /**
-   * Whether to disable the widget. An alias of the `aria-required` attribute.
+   * Whether to mark the widget required. An alias of the `aria-required` attribute.
    * @type {boolean}
    */
   export let required = false;
   /**
-   * Whether to disable the widget. An alias of the `aria-invalid` attribute.
+   * Whether to mark the widget invalid. An alias of the `aria-invalid` attribute.
    * @type {boolean}
    */
   export let invalid = false;
@@ -61,14 +61,19 @@
    */
   export let step = 1;
 
+  let edited = false;
+
   $: maximumFractionDigits = String(step).split('.')[1]?.length || 0;
   $: isMin = typeof min === 'number' && Number(value || 0) <= min;
   $: isMax = typeof max === 'number' && Number(value || 0) >= max;
 
   $: invalid =
-    (value !== undefined && Number.isNaN(Number(value))) ||
-    (typeof min === 'number' && Number(value || 0) < min) ||
-    (typeof max === 'number' && Number(value || 0) > max);
+    (required && edited && (value === undefined || value === '')) ||
+    (value !== undefined &&
+      value !== '' &&
+      (Number.isNaN(Number(value)) ||
+        (typeof min === 'number' && Number(value || 0) < min) ||
+        (typeof max === 'number' && Number(value || 0) > max)));
 
   let component;
 
@@ -95,7 +100,32 @@
   };
 </script>
 
-<div class="sui number-input {className}" class:disabled hidden={hidden || undefined}>
+<div
+  class="sui number-input {className}"
+  class:disabled
+  class:readonly
+  hidden={hidden || undefined}
+>
+  <div class="buttons">
+    <Button
+      iconic
+      disabled={disabled || readonly || Number.isNaN(Number(value)) || isMax}
+      on:click={() => {
+        increase();
+      }}
+    >
+      <Icon slot="start-icon" name="expand_less" label={$_('_sui.number_input.increase')} />
+    </Button>
+    <Button
+      iconic
+      disabled={disabled || readonly || Number.isNaN(Number(value)) || isMin}
+      on:click={() => {
+        decrease();
+      }}
+    >
+      <Icon slot="start-icon" name="expand_more" label={$_('_sui.number_input.decrease')} />
+    </Button>
+  </div>
   <TextInput
     bind:this={component}
     bind:value
@@ -108,6 +138,7 @@
     aria-valuenow={Number(value || 0)}
     aria-valuemin={min}
     aria-valuemax={max}
+    inputmode={maximumFractionDigits > 0 ? 'decimal' : 'numeric'}
     {...$$restProps}
     on:keydown={(event) => {
       const { key, ctrlKey, metaKey, altKey, shiftKey } = event;
@@ -122,28 +153,14 @@
         event.preventDefault();
         increase();
       }
+
+      if (!edited) {
+        edited = true;
+      }
     }}
     on:keypress
     on:input
   />
-  <Button
-    iconic
-    disabled={disabled || Number.isNaN(Number(value)) || isMin}
-    on:click={() => {
-      decrease();
-    }}
-  >
-    <Icon slot="start-icon" name="arrow_downward" label={$_('_sui.number_input.decrease')} />
-  </Button>
-  <Button
-    iconic
-    disabled={disabled || Number.isNaN(Number(value)) || isMax}
-    on:click={() => {
-      increase();
-    }}
-  >
-    <Icon slot="start-icon" name={'arrow_upward'} label={$_('_sui.number_input.increase')} />
-  </Button>
 </div>
 
 <style>.number-input {
@@ -151,29 +168,46 @@
   display: inline-flex;
   align-items: center;
 }
-.number-input :global(input) {
+.number-input :global(:not(:first-child) input) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.number-input :global(:not(:last-child) input) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-.number-input :global(button) {
+.number-input:not(.disabled) :global(button[aria-disabled="true"]) {
+  filter: grayscale(0) opacity(1);
+}
+.number-input:not(.disabled) :global(button[aria-disabled="true"]) :global(*) {
+  filter: grayscale(1) opacity(0.35);
+}
+
+.buttons {
+  display: flex;
+  flex-direction: column;
+  width: 24px;
+  height: var(--sui-textbox-height);
+}
+.buttons :global(button) {
   flex: none;
   border-width: 1px;
   border-color: var(--sui-textbox-border-color);
-  width: var(--sui-textbox-height);
-}
-.number-input :global(button):first-of-type {
-  border-radius: 0;
-  border-width: 1px 0;
-}
-.number-input :global(button):last-of-type {
-  border-radius: 0 4px 4px 0;
+  width: 100%;
+  height: 50%;
 }
-.number-input :global(button) :global(.icon) {
-  font-size: var(--sui-font-size-xx-large);
+.buttons :global(button):first-of-type {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+  border-width: 1px 0 0 1px;
 }
-.number-input:not(.disabled) :global(button[aria-disabled="true"]) {
-  filter: grayscale(0) opacity(1);
+.buttons :global(button):last-of-type {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-width: 0 0 1px 1px;
 }
-.number-input:not(.disabled) :global(button[aria-disabled="true"]) :global(*) {
-  filter: grayscale(1) opacity(0.35);
+.buttons :global(button) :global(.icon) {
+  font-size: 20px;
 }</style>

package/package/components/text-field/password-input.svelte

@@ -33,12 +33,12 @@
    */
   export let readonly = false;
   /**
-   * Whether to disable the widget. An alias of the `aria-required` attribute.
+   * Whether to mark the widget required. An alias of the `aria-required` attribute.
    * @type {boolean}
    */
   export let required = false;
   /**
-   * Whether to disable the widget. An alias of the `aria-invalid` attribute.
+   * Whether to mark the widget invalid. An alias of the `aria-invalid` attribute.
    * @type {boolean}
    */
   export let invalid = false;
@@ -61,7 +61,12 @@
   }
 </script>
 
-<div class="sui password-input {className}" class:disabled hidden={hidden || undefined}>
+<div
+  class="sui password-input {className}"
+  class:disabled
+  class:readonly
+  hidden={hidden || undefined}
+>
   <TextInput
     bind:this={inputComponent}
     bind:value
@@ -78,7 +83,7 @@
   />
   <Button
     iconic
-    {disabled}
+    disabled={disabled || readonly}
     pressed={passwordVisible}
     on:click={() => {
       passwordVisible = !passwordVisible;

package/package/components/text-field/search-bar.svelte

@@ -35,12 +35,12 @@
    */
   export let readonly = false;
   /**
-   * Whether to disable the widget. An alias of the `aria-required` attribute.
+   * Whether to mark the widget required. An alias of the `aria-required` attribute.
    * @type {boolean}
    */
   export let required = false;
   /**
-   * Whether to disable the widget. An alias of the `aria-invalid` attribute.
+   * Whether to mark the widget invalid. An alias of the `aria-invalid` attribute.
    * @type {boolean}
    */
   export let invalid = false;
@@ -69,6 +69,7 @@
 <div
   class="sui search-bar {className}"
   class:disabled
+  class:readonly
   role="search"
   hidden={hidden || undefined}
   aria-hidden={hidden}
@@ -84,6 +85,7 @@
     {readonly}
     {required}
     {invalid}
+    inputmode="search"
     {...$$restProps}
     bind:this={inputComponent}
     on:input

package/package/components/text-field/text-area.svelte

@@ -28,12 +28,12 @@
    */
   export let readonly = false;
   /**
-   * Whether to disable the widget. An alias of the `aria-required` attribute.
+   * Whether to mark the widget required. An alias of the `aria-required` attribute.
    * @type {boolean}
    */
   export let required = false;
   /**
-   * Whether to disable the widget. An alias of the `aria-invalid` attribute.
+   * Whether to mark the widget invalid. An alias of the `aria-invalid` attribute.
    * @type {boolean}
    */
   export let invalid = false;
@@ -54,7 +54,7 @@
   export let autoResize = false;
 </script>
 
-<div class="sui text-area {className}" class:disabled hidden={hidden || undefined}>
+<div class="sui text-area {className}" class:disabled class:readonly hidden={hidden || undefined}>
   <textarea
     {name}
     bind:value
@@ -107,8 +107,9 @@ textarea:focus,
 .clone:focus {
   border-color: var(--sui-primary-accent-color);
 }
-textarea:disabled,
-.clone:disabled {
+textarea:disabled, textarea:read-only,
+.clone:disabled,
+.clone:read-only {
   background-color: var(--sui-disabled-background-color);
 }
 

package/package/components/text-field/text-input.svelte

@@ -42,12 +42,12 @@
    */
   export let readonly = false;
   /**
-   * Whether to disable the widget. An alias of the `aria-required` attribute.
+   * Whether to mark the widget required. An alias of the `aria-required` attribute.
    * @type {boolean}
    */
   export let required = false;
   /**
-   * Whether to disable the widget. An alias of the `aria-invalid` attribute.
+   * Whether to mark the widget invalid. An alias of the `aria-invalid` attribute.
    * @type {boolean}
    */
   export let invalid = false;
@@ -73,13 +73,19 @@
    * @type {boolean}
    */
   export let showInlineLabel = false;
+  /**
+   * The `inputmode` attribute on the `<input>`.
+   * @type {'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'}
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
+   */
+  export let inputmode = 'text';
 
   const id = getRandomId('input');
 
   $: ariaLabel = $$restProps['aria-label'];
 </script>
 
-<div class="sui text-input {className}" class:disabled hidden={hidden || undefined}>
+<div class="sui text-input {className}" class:disabled class:readonly hidden={hidden || undefined}>
   <input
     type="text"
     {role}
@@ -87,6 +93,7 @@
     tabindex={disabled ? -1 : 0}
     disabled={disabled || undefined}
     readonly={readonly || undefined}
+    {inputmode}
     aria-hidden={hidden}
     aria-disabled={disabled}
     aria-readonly={readonly}
@@ -116,6 +123,11 @@
   align-items: center;
 }
 
+input:-webkit-autofill,
+input:-webkit-autofill:focus {
+  transition: background-color 0s 600000s, color 0s 600000s;
+}
+
 input {
   z-index: 1;
   display: inline-block;
@@ -140,7 +152,7 @@ input:read-only {
   color: var(--sui-tertiary-foreground-color);
   border-color: var(--sui-textbox-border-color) !important;
 }
-input:disabled {
+input:disabled, input:read-only {
   background-color: var(--sui-disabled-background-color);
 }
 input[aria-invalid=true] {

package/package/components/text-field/text-input.svelte.d.ts

@@ -17,9 +17,10 @@ export default class TextInput extends SvelteComponent<{
     hidden?: boolean;
     element?: HTMLInputElement;
     role?: "textbox" | "searchbox" | "combobox" | "spinbutton";
-    keyShortcuts?: string;
     readonly?: boolean;
+    keyShortcuts?: string;
     showInlineLabel?: boolean;
+    inputmode?: "text" | "numeric" | "decimal" | "tel" | "search" | "email" | "url";
 }, {
     input: Event;
     keydown: KeyboardEvent;
@@ -65,6 +66,9 @@ export default class TextInput extends SvelteComponent<{
     /**accessor*/
     set showInlineLabel(arg: boolean);
     get showInlineLabel(): boolean;
+    /**accessor*/
+    set inputmode(arg: "text" | "numeric" | "decimal" | "tel" | "search" | "email" | "url");
+    get inputmode(): "text" | "numeric" | "decimal" | "tel" | "search" | "email" | "url";
 }
 export type TextInputProps = typeof __propDef.props;
 export type TextInputEvents = typeof __propDef.events;
@@ -82,9 +86,10 @@ declare const __propDef: {
         hidden?: boolean | undefined;
         element?: HTMLInputElement | undefined;
         role?: 'textbox' | 'searchbox' | 'combobox' | 'spinbutton';
-        keyShortcuts?: string | undefined;
         readonly?: boolean;
+        keyShortcuts?: string | undefined;
         showInlineLabel?: boolean;
+        inputmode?: 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
     };
     events: {
         input: Event;

package/package/components/util/app-shell.svelte

@@ -96,7 +96,7 @@
   --sui-background-color-3-hsl: var(--sui-base-hue) 5% 96%;
   --sui-background-color-4-hsl: var(--sui-base-hue) 5% 94%;
   --sui-background-color-5-hsl: var(--sui-base-hue) 5% 74%;
-  --sui-border-color-1-hsl: var(--sui-base-hue) 5% 54%;
+  --sui-border-color-1-hsl: var(--sui-base-hue) 5% 50%;
   --sui-border-color-2-hsl: var(--sui-base-hue) 5% 74%;
   --sui-border-color-3-hsl: var(--sui-base-hue) 5% 70%;
   --sui-shadow-color: var(--sui-base-hue) 10% 0%;
@@ -129,7 +129,7 @@
   --sui-background-color-3-hsl: var(--sui-base-hue) 10% 14%;
   --sui-background-color-4-hsl: var(--sui-base-hue) 10% 16%;
   --sui-background-color-5-hsl: var(--sui-base-hue) 10% 26%;
-  --sui-border-color-1-hsl: var(--sui-base-hue) 10% 46%;
+  --sui-border-color-1-hsl: var(--sui-base-hue) 10% 50%;
   --sui-border-color-2-hsl: var(--sui-base-hue) 10% 26%;
   --sui-border-color-3-hsl: var(--sui-base-hue) 10% 22%;
   --sui-shadow-color: var(--sui-base-hue) 10% 0%;
@@ -397,7 +397,9 @@
 }
 
 :global(.disabled),
+:global(.readonly),
 :global([aria-disabled=true]),
+:global([aria-readonly=true]),
 :global([inert]) {
   cursor: default;
   pointer-events: none;
@@ -406,13 +408,17 @@
   filter: grayscale(1) opacity(0.35);
 }
 :global(.disabled) :global(*),
+:global(.readonly) :global(*),
 :global([aria-disabled=true]) :global(*),
+:global([aria-readonly=true]) :global(*),
 :global([inert]) :global(*) {
   filter: grayscale(0) opacity(1);
 }
 
 :global(.disabled) :global(*),
+:global(.readonly) :global(*),
 :global([aria-disabled=true]) :global(*),
+:global([aria-readonly=true]) :global(*),
 :global([inert]) :global(*) {
   cursor: default;
   pointer-events: none;

package/package/components/util/popup.svelte

@@ -38,6 +38,11 @@
    */
   export let position = 'bottom-left';
 
+  /**
+   * Whether to keep the content when the dialog is not displayed.
+   */
+  export let keepContent = false;
+
   /**
    * Whether to show the popup at the center of the screen on mobile/tablet and ignore the defined
    * dropdown `position`.
@@ -155,7 +160,7 @@
     style:max-height={$style.height}
     style:visibility={$style.inset ? undefined : 'hidden'}
   >
-    {#if showContent}
+    {#if keepContent || showContent}
       <slot />
     {/if}
   </div>
@@ -207,8 +212,8 @@
   outline-width: 0 !important;
   color: var(--sui-primary-foreground-color);
   background-color: var(--sui-secondary-background-color-translucent);
-  -webkit-backdrop-filter: blur(16px);
-  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(32px);
+  backdrop-filter: blur(32px);
   box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
   will-change: opacity, transform;
   transition-property: opacity, transform;

package/package/components/util/popup.svelte.d.ts

@@ -9,6 +9,7 @@ export default class Popup extends SvelteComponent<{
     position?: PopupPosition;
     anchor?: HTMLElement;
     content?: HTMLElement;
+    keepContent?: boolean;
     touchOptimized?: boolean;
     open?: import("svelte/store").Writable<boolean>;
 }, {
@@ -32,6 +33,9 @@ export default class Popup extends SvelteComponent<{
     set position(arg: PopupPosition);
     get position(): PopupPosition;
     /**accessor*/
+    set keepContent(arg: boolean);
+    get keepContent(): boolean;
+    /**accessor*/
     set touchOptimized(arg: boolean);
     get touchOptimized(): boolean;
     /**accessor*/
@@ -50,6 +54,7 @@ declare const __propDef: {
         position?: PopupPosition;
         anchor?: HTMLElement | undefined;
         content?: HTMLElement | undefined;
+        keepContent?: boolean;
         touchOptimized?: boolean;
         open?: import("svelte/store").Writable<boolean>;
     };

package/package/services/group.js

@@ -118,12 +118,28 @@ class Group {
     );
   }
 
+  /** @type {boolean} */
+  get isDisabled() {
+    return this.parent.matches('[aria-disabled="true"]');
+  }
+
+  /** @type {boolean} */
+  get isReadOnly() {
+    return this.parent.matches('[aria-readonly="true"]');
+  }
+
   /**
    * Select (and move focus to) the given target.
    * @param {(MouseEvent | KeyboardEvent)} event Triggered event.
    * @param {HTMLElement} newTarget Target element.
    */
   selectTarget(event, newTarget) {
+    if (this.isDisabled || this.isReadOnly) {
+      event.preventDefault();
+
+      return;
+    }
+
     const targetParentGroup = newTarget.closest(this.parentGroupSelector);
 
     this.activeMembers.forEach((element) => {

package/package/services/popup.d.ts

@@ -23,8 +23,12 @@ declare class Popup {
     popupElement: HTMLDialogElement;
     position: PopupPosition;
     id: string;
+    /** @type {boolean} */
+    get isDisabled(): boolean;
+    /** @type {boolean} */
+    get isReadOnly(): boolean;
     /**
-     * Continue checking the position in case the window or parent element resizes.
+     * Check the position of the anchor element.
      */
     checkPosition(): void;
 }

package/package/services/popup.js

@@ -48,26 +48,26 @@ class Popup {
       const top = position.startsWith('bottom-')
         ? `${Math.round(intersectionRect.bottom)}px`
         : position.endsWith('-top')
-        ? `${Math.round(intersectionRect.top)}px`
-        : 'auto';
+          ? `${Math.round(intersectionRect.top)}px`
+          : 'auto';
 
       const right = position.startsWith('left-')
         ? `${Math.round(rootBounds.width - intersectionRect.left)}px`
         : position.endsWith('-right')
-        ? `${Math.round(rootBounds.width - intersectionRect.right)}px`
-        : 'auto';
+          ? `${Math.round(rootBounds.width - intersectionRect.right)}px`
+          : 'auto';
 
       const bottom = position.startsWith('top-')
         ? `${Math.round(rootBounds.height - intersectionRect.top)}px`
         : position.endsWith('-bottom')
-        ? `${Math.round(rootBounds.height - intersectionRect.bottom)}px`
-        : 'auto';
+          ? `${Math.round(rootBounds.height - intersectionRect.bottom)}px`
+          : 'auto';
 
       const left = position.startsWith('right-')
         ? `${Math.round(intersectionRect.right)}px`
         : position.endsWith('-left')
-        ? `${Math.round(intersectionRect.left)}px`
-        : 'auto';
+          ? `${Math.round(intersectionRect.left)}px`
+          : 'auto';
 
       const anchorPopup = /** @type {HTMLElement} */ (this.anchorElement.closest('.popup'));
 
@@ -100,7 +100,7 @@ class Popup {
     this.popupElement.setAttribute('id', this.id);
 
     this.anchorElement.addEventListener('click', () => {
-      if (!this.anchorElement.matches('[aria-disabled="true"]')) {
+      if (!this.isDisabled && !this.isReadOnly) {
         this.open.set(!get(this.open));
       }
     });
@@ -109,7 +109,7 @@ class Popup {
       const { key, ctrlKey, metaKey, shiftKey, altKey } = event;
       const hasModifier = shiftKey || altKey || ctrlKey || metaKey;
 
-      if (['Enter', ' '].includes(key) && !hasModifier) {
+      if (!this.isDisabled && !this.isReadOnly && ['Enter', ' '].includes(key) && !hasModifier) {
         event.preventDefault();
         event.stopPropagation();
         this.open.set(!get(this.open));
@@ -154,19 +154,22 @@ class Popup {
     });
   }
 
+  /** @type {boolean} */
+  get isDisabled() {
+    return this.anchorElement.matches('[aria-disabled="true"]');
+  }
+
+  /** @type {boolean} */
+  get isReadOnly() {
+    return this.anchorElement.matches('[aria-readonly="true"]');
+  }
+
   /**
-   * Continue checking the position in case the window or parent element resizes.
+   * Check the position of the anchor element.
    */
   checkPosition() {
+    this.observer.unobserve(this.anchorElement);
     this.observer.observe(this.anchorElement);
-
-    window.requestAnimationFrame(() => {
-      this.observer.unobserve(this.anchorElement);
-
-      if (get(this.open)) {
-        this.checkPosition();
-      }
-    });
   }
 }
 

package/package/styles/core.scss

@@ -101,7 +101,9 @@ dialog {
 }
 
 .disabled,
+.readonly,
 [aria-disabled="true"],
+[aria-readonly="true"],
 [inert] {
   cursor: default;
   pointer-events: none;
@@ -115,7 +117,9 @@ dialog {
 }
 
 .disabled *,
+.readonly *,
 [aria-disabled="true"] *,
+[aria-readonly="true"] *,
 [inert] * {
   cursor: default;
   pointer-events: none;

package/package/styles/variables.scss

@@ -10,7 +10,7 @@
   --sui-background-color-3-hsl: var(--sui-base-hue) 5% 96%; // secondary
   --sui-background-color-4-hsl: var(--sui-base-hue) 5% 94%; // tertiary/disabled
   --sui-background-color-5-hsl: var(--sui-base-hue) 5% 74%; // highlight
-  --sui-border-color-1-hsl: var(--sui-base-hue) 5% 54%; // control
+  --sui-border-color-1-hsl: var(--sui-base-hue) 5% 50%; // control
   --sui-border-color-2-hsl: var(--sui-base-hue) 5% 74%; // primary
   --sui-border-color-3-hsl: var(--sui-base-hue) 5% 70%; // secondary
   --sui-shadow-color: var(--sui-base-hue) 10% 0%;
@@ -45,7 +45,7 @@
   --sui-background-color-3-hsl: var(--sui-base-hue) 10% 14%; // secondary
   --sui-background-color-4-hsl: var(--sui-base-hue) 10% 16%; // tertiary/disabled
   --sui-background-color-5-hsl: var(--sui-base-hue) 10% 26%; // highlight
-  --sui-border-color-1-hsl: var(--sui-base-hue) 10% 46%; // control
+  --sui-border-color-1-hsl: var(--sui-base-hue) 10% 50%; // control
   --sui-border-color-2-hsl: var(--sui-base-hue) 10% 26%; // primary
   --sui-border-color-3-hsl: var(--sui-base-hue) 10% 22%; // secondary
   --sui-shadow-color: var(--sui-base-hue) 10% 0%;