@inglorious/ui 7.2.1 → 7.2.3

package/src/controls/input/style.css

@@ -1,10 +1,10 @@
-.iw-input-field {
-  display: flex;
+.iw-input {
+  display: inline-flex;
   flex-direction: column;
   gap: var(--iw-space-1);
   font-family: var(--iw-font-family-sans);
 
-  &.iw-input-full-width .iw-input {
+  &.iw-input-full-width {
     width: 100%;
   }
 
@@ -12,6 +12,7 @@
     font-size: var(--iw-font-size-sm);
     font-weight: var(--iw-font-weight-normal);
     color: var(--iw-color-text);
+    line-height: var(--iw-line-height-normal);
   }
 
   .iw-input-required {
@@ -23,90 +24,76 @@
     position: relative;
     display: flex;
     align-items: center;
-  }
-
-  .iw-input {
-    height: 2.25rem;
+    gap: var(--iw-space-2);
     padding: 0 var(--iw-space-3);
-    font-family: inherit;
-    font-size: var(--iw-font-size-base);
-    line-height: 1.2;
-    color: var(--iw-input-text);
-    background-color: var(--iw-input-bg);
     border: 1px solid var(--iw-input-border);
     border-radius: var(--iw-input-radius);
-    outline: none;
-    transition: all var(--iw-transition-fast);
+    transition:
+      border-color var(--iw-transition-fast),
+      box-shadow var(--iw-transition-fast),
+      background-color var(--iw-transition-fast);
 
-    &::placeholder {
-      color: var(--iw-input-text-placeholder);
-    }
-
-    &:hover:not(:disabled) {
+    &:hover:not(:has(.iw-input-control:disabled)) {
       background-color: var(--iw-input-bg-hover);
       border-color: var(--iw-input-border-hover);
     }
 
-    &:focus:not(:disabled) {
+    &:focus-within:not(:has(.iw-input-control:disabled)) {
       background-color: var(--iw-input-bg-focus);
       border-color: var(--iw-input-border-focus);
       box-shadow: var(--iw-input-shadow-focus);
     }
 
-    &:disabled {
+    &:has(.iw-input-control-disabled) {
       opacity: 0.5;
       cursor: not-allowed;
     }
 
-    &.iw-input-error {
+    &:has(.iw-input-control-error) {
       border-color: var(--iw-color-error);
 
-      &:focus {
+      &:focus-within {
         border-color: var(--iw-color-error);
         box-shadow: 0 0 0 1px var(--iw-color-error);
       }
     }
 
-    &.iw-input-number {
-      text-align: right;
-    }
+    .iw-input-control {
+      /* Fills the frame, which is now the box. */
+      flex: 1;
+      min-width: 0;
+      font-family: inherit;
+      line-height: 1.2;
+      color: var(--iw-input-text);
+      background-color: transparent;
+      border: none;
+      outline: none;
+
+      &::placeholder {
+        color: var(--iw-input-text-placeholder);
+      }
 
-    &.iw-input-sm {
-      height: 2rem;
-      padding: 0 var(--iw-space-2);
-      font-size: var(--iw-font-size-sm);
-    }
+      &.iw-input-number {
+        text-align: right;
+      }
 
-    &.iw-input-lg {
-      height: 2.75rem;
-      padding: 0 var(--iw-space-4);
-      font-size: var(--iw-font-size-lg);
-    }
-  }
+      &.iw-input-sm {
+        height: 2rem;
+        font-size: var(--iw-font-size-sm);
+      }
 
-  .iw-input-icon {
-    position: absolute;
-    left: var(--iw-space-3);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--iw-color-text-muted);
-    pointer-events: none;
+      &.iw-input-md {
+        height: 2.25rem;
+        font-size: var(--iw-font-size-base);
+      }
 
-    &.iw-input-icon-after {
-      left: auto;
-      right: var(--iw-space-3);
+      &.iw-input-lg {
+        height: 2.75rem;
+        font-size: var(--iw-font-size-lg);
+      }
     }
   }
 
-  &.iw-input-has-icon .iw-input {
-    padding-left: calc(var(--iw-space-3) * 2 + 1em);
-  }
-
-  &.iw-input-has-icon-after .iw-input {
-    padding-right: calc(var(--iw-space-3) * 2 + 1em);
-  }
-
   .iw-input-hint,
   .iw-input-error-message {
     font-size: var(--iw-font-size-sm);

package/src/controls/input/template.js

@@ -6,7 +6,9 @@
 import { html } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
 import { ref } from "@inglorious/web/directives/ref"
+import { when } from "@inglorious/web/directives/when"
 
+import { Icon } from "../../data-display/icon/index.js"
 import { applyElementProps } from "../../shared/applyElementProps.js"
 
 /**
@@ -19,100 +21,122 @@ import { applyElementProps } from "../../shared/applyElementProps.js"
  * @param {InputProps} props
  * @returns {TemplateResult}
  */
-export function render(props) {
-  const {
-    id,
-    type, // eslint-disable-line no-unused-vars
-    name = "",
-    inputType = "text",
-    value = "",
-    placeholder = "",
-    label,
-    hint,
-    error,
-    size = "md",
-    isDisabled = false,
-    isReadOnly = false,
-    isRequired = false,
-    isFullWidth = false,
-    icon,
-    iconAfter,
-    onChange,
-    onBlur,
-    onFocus,
-    ...rest
-  } = props
+export const Input = {
+  render(props) {
+    return this.renderInput(props)
+  },
 
-  const inputId = id || name
+  renderInput(props) {
+    const {
+      id,
+      type, // eslint-disable-line no-unused-vars
+      name = "",
+      label,
+      hint,
+      error,
+      isDisabled = false,
+      isRequired = false,
+      isFullWidth = false,
+      icon,
+      iconAfter,
+    } = props
 
-  const wrapperClasses = {
-    "iw-input-field": true,
-    "iw-input-full-width": isFullWidth,
-    "iw-input-disabled": isDisabled,
-    "iw-input-has-error": !!error,
-    "iw-input-has-icon": !!icon,
-    "iw-input-has-icon-after": !!iconAfter,
-  }
+    const controlId = id || name
+    const messageId = (error || hint) && id ? `${id}-message` : ""
 
-  const inputClasses = {
-    "iw-input": true,
-    [`iw-input-${size}`]: size !== "md",
-    "iw-input-error": !!error,
-    "iw-input-number": inputType === "number",
-  }
+    const inputClasses = {
+      "iw-input": true,
+      "iw-input-full-width": isFullWidth,
+      "iw-input-disabled": isDisabled,
+      "iw-input-has-error": !!error,
+      "iw-input-has-icon": !!icon,
+      "iw-input-has-icon-after": !!iconAfter,
+    }
 
-  return html`
-    <div class=${classMap(wrapperClasses)}>
-      ${
-        label
-          ? html`
-              <label for=${inputId} class="iw-input-label">
-                ${label}
-                ${
-                  isRequired
-                    ? html`<span class="iw-input-required">*</span>`
-                    : null
-                }
-              </label>
-            `
-          : null
-      }
+    return html`
+      <div class=${classMap(inputClasses)}>
+        ${when(
+          label,
+          () => html`
+            <label for=${controlId} class="iw-input-label">
+              ${label}
+              ${when(
+                isRequired,
+                () => html`<span class="iw-input-required">*</span>`,
+              )}
+            </label>
+          `,
+        )}
+        ${this.renderControl?.(props)}
+        ${when(
+          error,
+          () =>
+            html`<span id=${messageId || ""} class="iw-input-error-message"
+              >${error}</span
+            >`,
+        )}
+        ${when(
+          !error && hint,
+          () =>
+            html`<span id=${messageId || ""} class="iw-input-hint"
+              >${hint}</span
+            >`,
+        )}
+      </div>
+    `
+  },
 
-      <div class="iw-input-frame">
-        ${icon ? html`<span class="iw-input-icon">${icon}</span>` : null}
+  renderControl(props) {
+    const {
+      id,
+      type, // eslint-disable-line no-unused-vars
+      name = "",
+      inputType = "text",
+      value = "",
+      placeholder = "",
+      error,
+      size = "md",
+      isDisabled = false,
+      isReadOnly = false,
+      isRequired = false,
+      icon,
+      iconAfter,
+      onChange,
+      onBlur,
+      onFocus,
+      ...rest
+    } = props
 
-        <input
-          id=${inputId}
-          name=${name}
-          type=${inputType}
-          .value=${value}
-          placeholder=${placeholder}
-          ?disabled=${isDisabled}
-          ?readonly=${isReadOnly}
-          ?required=${isRequired}
-          class=${classMap(inputClasses)}
-          @input=${(event) => onChange?.(event.target.value)}
-          @blur=${onBlur}
-          @focus=${onFocus}
-          ${ref((element) => applyElementProps(element, rest))}
-        />
+    const controlId = id || name
 
-        ${
-          iconAfter
-            ? html`<span class="iw-input-icon iw-input-icon-after"
-                >${iconAfter}</span
-              >`
-            : null
-        }
-      </div>
+    const controlClasses = {
+      "iw-input-control": true,
+      [`iw-input-${size}`]: true,
+      "iw-input-control-disabled": isDisabled,
+      "iw-input-control-error": !!error,
+      "iw-input-number": inputType === "number",
+    }
+
+    return html`<div class="iw-input-frame">
+      ${when(icon, () => Icon.render({ children: icon, color: "var(--iw-color-text-muted)", size }))}
+
+      <input
+        id=${controlId}
+        name=${name}
+        type=${inputType}
+        .value=${value}
+        placeholder=${placeholder}
+        ?disabled=${isDisabled}
+        ?readonly=${isReadOnly}
+        ?required=${isRequired}
+        class=${classMap(controlClasses)}
+        @input=${(event) => onChange?.(event.target.value)}
+        @blur=${onBlur}
+        @focus=${onFocus}
+        ${ref((element) => applyElementProps(element, rest))}
+      />
 
-      ${
-        error
-          ? html`<span class="iw-input-error-message">${error}</span>`
-          : hint
-            ? html`<span class="iw-input-hint">${hint}</span>`
-            : null
-      }
-    </div>
-  `
+      ${when(iconAfter, () => Icon.render({ children: iconAfter, color: "var(--iw-color-text-muted)", size }))}
+    </div>`
+  },
 }

package/src/controls/select/index.js

@@ -1,3 +1,3 @@
-import * as renderers from "./template.js"
+import { Select as renderers } from "./template.js"
 
 export const Select = { ...renderers }

package/src/controls/select/select.stories.js

@@ -1,5 +1,5 @@
 import { createRender } from "../../stories/notifyStory.js"
-import { Select } from "./index.js"
+import { Select } from "."
 
 export default {
   title: "Controls/Select",
@@ -34,7 +34,8 @@ export default {
   parameters: {
     docs: {
       description: {
-        component: "Select field control.",
+        component:
+          "Select field control with labels, hints, errors, and semantic states.",
       },
     },
   },
@@ -42,9 +43,11 @@ export default {
 
 export const Default = {}
 Default.args = {
+  label: "Animals",
   name: "animals",
   options: ["Cat", "Dog", "Seal"],
   value: "",
+  error: "",
   size: "md",
   isDisabled: false,
   isFullWidth: false,
@@ -60,10 +63,33 @@ ComplexOptions.args = {
   ],
 }
 
+export const WithHint = {}
+WithHint.args = {
+  ...Default.args,
+  hint: "Please select an animal",
+}
+
+export const WithError = {}
+WithError.args = {
+  ...Default.args,
+  error: "You cannot select this one!",
+}
+
+export const WithHintAndError = {}
+WithHintAndError.args = {
+  ...WithHint.args,
+  error: "You cannot select this one!",
+}
+
+export const Required = {}
+Required.args = {
+  ...Default.args,
+  isRequired: true,
+}
+
 export const Disabled = {}
 Disabled.args = {
   ...Default.args,
-  value: "Cat",
   isDisabled: true,
 }
 
@@ -81,6 +107,12 @@ Small.args = {
   size: "sm",
 }
 
+export const Medium = {}
+Medium.args = {
+  ...Default.args,
+  size: "md",
+}
+
 export const Large = {}
 Large.args = {
   ...Default.args,

package/src/controls/select/style.css

@@ -1,88 +1,167 @@
 .iw-select {
-  appearance: none;
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--iw-space-1);
   font-family: var(--iw-font-family-sans);
-  font-size: var(--iw-font-size-sm);
-  line-height: var(--iw-line-height-normal);
-  height: 2.25rem;
-  border: 1px solid var(--iw-input-border);
-  border-radius: var(--iw-input-radius);
-  padding: 0 var(--iw-space-10) 0 var(--iw-space-3);
-  background: var(--iw-input-bg);
-  background-image:
-    linear-gradient(
-      45deg,
-      transparent 50%,
-      var(--iw-input-text, var(--iw-color-text)) 50%
-    ),
-    linear-gradient(
-      135deg,
-      var(--iw-input-text, var(--iw-color-text)) 50%,
-      transparent 50%
-    );
-  background-position:
-    right calc(var(--iw-space-4) + 0.3125rem) center,
-    right var(--iw-space-4) center;
-  background-size:
-    0.375rem 0.375rem,
-    0.375rem 0.375rem;
-  background-repeat: no-repeat;
-  color: var(--iw-input-text);
-  cursor: pointer;
-  user-select: none;
-  transition:
-    border-color var(--iw-transition-fast),
-    box-shadow var(--iw-transition-fast),
-    background-color var(--iw-transition-fast);
 
   &.iw-select-full-width {
     width: 100%;
   }
 
-  &:hover {
-    border-color: var(--iw-input-border-hover);
-    background: var(--iw-input-bg-hover);
+  .iw-select-label {
+    font-size: var(--iw-font-size-sm);
+    font-weight: var(--iw-font-weight-normal);
+    color: var(--iw-color-text);
+    line-height: var(--iw-line-height-normal);
   }
 
-  &:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
+  .iw-select-required {
+    color: var(--iw-color-error);
+    margin-left: var(--iw-space-1);
   }
 
-  &[multiple] {
-    appearance: auto;
-    background-image: none;
+  .iw-select-hint,
+  .iw-select-error-message {
+    font-size: var(--iw-font-size-sm);
+    line-height: var(--iw-line-height-normal);
   }
 
-  .iw-select-option {
+  .iw-select-hint {
+    color: var(--iw-color-text-muted);
+  }
+
+  .iw-select-error-message {
+    color: var(--iw-color-error);
+  }
+
+  .iw-select-frame {
+    display: flex;
+    align-items: center;
+    /* The gap spaces the text from the arrow, the same way it spaces an
+       Input's text from its icons. */
+    gap: var(--iw-space-2);
+    padding: 0 var(--iw-space-3);
+    border: 1px solid var(--iw-input-border);
+    border-radius: var(--iw-input-radius);
+    color: var(--iw-input-text);
+    background-color: var(--iw-input-bg);
+    cursor: pointer;
     user-select: none;
-    padding: var(--iw-space-2) var(--iw-space-3);
+    transition:
+      border-color var(--iw-transition-fast),
+      box-shadow var(--iw-transition-fast),
+      background-color var(--iw-transition-fast);
 
-    &:focused {
-      background: var(--iw-color-bg-secondary);
+    &:hover:not(:has(.iw-select-control:disabled)) {
+      background-color: var(--iw-input-bg-hover);
+      border-color: var(--iw-input-border-hover);
     }
 
-    &.iw-select-option-selected {
-      background: color-mix(
-        in srgb,
-        var(--iw-color-primary) 16%,
-        var(--iw-color-bg) 84%
-      );
+    &:focus-within:not(:has(.iw-select-control:disabled)) {
+      background-color: var(--iw-input-bg-focus);
+      border-color: var(--iw-input-border-focus);
+      box-shadow: var(--iw-input-shadow-focus);
     }
-  }
 
-  &.iw-select-sm {
-    height: 2rem;
-    padding: 0 var(--iw-space-10) 0 var(--iw-space-2);
-    background-position:
-      right calc(var(--iw-space-3) + 0.3125rem) center,
-      right var(--iw-space-3) center;
-  }
+    &:has(.iw-select-control-disabled) {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    &:has(.iw-select-control-error) {
+      border-color: var(--iw-color-error);
+
+      &:focus-within {
+        border-color: var(--iw-color-error);
+        box-shadow: 0 0 0 1px var(--iw-color-error);
+      }
+    }
+
+    /* The control is focusable so it can be opened from the keyboard. */
+    &:focus-visible {
+      outline: none;
+      border-color: var(--iw-input-border-focus);
+      box-shadow: var(--iw-input-shadow-focus);
+    }
+
+    .iw-select-control {
+      appearance: none;
+      flex: 1;
+      min-width: 0;
+      font-family: inherit;
+      line-height: 1.2;
+      background-color: transparent;
+      border: none;
+      outline: none;
 
-  &.iw-select-lg {
-    height: 2.75rem;
-    padding: 0 var(--iw-space-12) 0 var(--iw-space-4);
-    background-position:
-      right calc(var(--iw-space-5) + 0.3125rem) center,
-      right var(--iw-space-5) center;
+      background-color: var(--iw-input-bg);
+      color: var(--iw-input-text);
+      cursor: pointer;
+      user-select: none;
+      transition:
+        border-color var(--iw-transition-fast),
+        box-shadow var(--iw-transition-fast),
+        background-color var(--iw-transition-fast);
+
+      &[multiple] {
+        appearance: auto;
+        background-image: none;
+      }
+
+      &.iw-select-sm {
+        height: 2rem;
+        font-size: var(--iw-font-size-sm);
+      }
+
+      &.iw-select-md {
+        height: 2.25rem;
+        font-size: var(--iw-font-size-base);
+      }
+
+      &.iw-select-lg {
+        height: 2.75rem;
+        font-size: var(--iw-font-size-lg);
+      }
+
+      .iw-select-option {
+        user-select: none;
+        padding: var(--iw-space-2) var(--iw-space-3);
+
+        &:focused {
+          background-color: var(--iw-color-bg-secondary);
+        }
+
+        &.iw-select-option-selected {
+          background-color: color-mix(
+            in srgb,
+            var(--iw-color-primary) 16%,
+            var(--iw-color-bg) 84%
+          );
+        }
+      }
+    }
+
+    .iw-select-arrow {
+      width: 1.25rem;
+      height: 1.25rem;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: var(--iw-font-size-sm);
+      line-height: 1;
+      /* A flex child, like Input's icons. Absolutely positioning it needed a
+         positioning context on the frame and a reserved padding strip so the
+         text would not run underneath it; the row's gap does both. */
+      flex: none;
+      /* Decorative. A popup only opens from a trusted gesture on the select
+         itself, so the arrow cannot open it; leaving clicks to pass through
+         keeps the strip from swallowing them. */
+      pointer-events: none;
+      color: var(--iw-color-text-muted);
+    }
   }
 }
+
+.iw-select-frame:has(.iw-select-control:disabled) .iw-select-arrow {
+  opacity: 0.6;
+}