@inglorious/ui 9.11.0 → 9.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "9.11.0",
+  "version": "9.12.0",
   "description": "A design system for Inglorious Web with render-function components and customizable themes",
   "author": "Matteo Antony Mistretta <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -341,7 +341,7 @@
   "peerDependencies": {
     "@inglorious/store": "^12.1.1",
     "@inglorious/utils": "^5.1.0",
-    "@inglorious/web": "^6.14.0"
+    "@inglorious/web": "^6.14.1"
   },
   "devDependencies": {
     "@iconify-icons/fa7-brands": "^2.0.0",
@@ -353,7 +353,7 @@
     "@inglorious/store": "12.1.1",
     "@inglorious/vite-plugin-jsx": "2.0.6",
     "@inglorious/vite-plugin-vue": "1.0.7",
-    "@inglorious/web": "6.14.0",
+    "@inglorious/web": "6.14.1",
     "@lit-labs/ssr": "^4.1.0",
     "@storybook/addon-docs": "^10.6.5",
     "@storybook/web-components-vite": "^10.6.5",

package/src/controls/button/button.stories.js

@@ -57,6 +57,10 @@ export default {
       options: ["button", "submit", "reset", "menu"],
       description: "Native HTML button type attribute.",
     },
+    href: {
+      control: "text",
+      description: "Renders a link styled as a button.",
+    },
     accept: {
       control: "text",
       description: "File types the picker offers (with `onFileSelect`).",
@@ -178,6 +182,14 @@ FilePicker.args = {
   onFileSelect: () => {},
 }
 
+export const Link = {}
+Link.args = {
+  ...Default.args,
+  children: "Open events",
+  color: "primary",
+  href: "#events",
+}
+
 export const CustomContent = {}
 CustomContent.args = {
   ...Default.args,

package/src/controls/button/template.js

@@ -14,6 +14,7 @@ import { applyElementProps } from "../../shared/apply-element-props.js"
  * Renders a themed button for actions and form submission.
  * Supports variants, sizes, shapes, pressed state, and full-width layout.
  * With `onFileSelect`, the button also opens a file picker on click.
+ * With `href`, it is a link that looks like a button.
  * @example
  * // Stateless usage
  * button.render({ children: 'Click me', color: 'primary' })
@@ -21,6 +22,9 @@ import { applyElementProps } from "../../shared/apply-element-props.js"
  * // File picker
  * button.render({ children: 'Upload', accept: 'image/*', onFileSelect })
  *
+ * // Link
+ * button.render({ children: 'Open', href: '/events' })
+ *
  * @param {ButtonProps} props
  * @returns {TemplateResult}
  */
@@ -36,6 +40,7 @@ export function render(props) {
     isPressed = false,
     isFullWidth = false,
     buttonType = "button",
+    href,
     ariaLabel,
     isAriaPressed,
     className = "",
@@ -72,6 +77,18 @@ export function render(props) {
       }
     : onClick
 
+  if (href != null) {
+    return html`<a
+      href=${isDisabled ? nothing : href}
+      aria-label=${ariaLabel || nothing}
+      aria-disabled=${isDisabled ? "true" : nothing}
+      class=${classMap(classes)}
+      @click=${isDisabled ? nothing : onClick}
+      ${ref((element) => applyElementProps(element, rest))}
+      >${children}</a
+    >`
+  }
+
   return html`
     <button
       type=${buttonType}

package/src/controls/button-group/template.js

@@ -33,9 +33,11 @@ export function render(props) {
     ...rest
   } = props
 
+  const isSelection = value != null || isMultiple
+
   const groupClasses = {
     "iw-button-group": true,
-    "iw-button-group-selection": value != null || isMultiple,
+    "iw-button-group-selection": isSelection,
     [`iw-button-group-${direction}`]: true,
     "iw-button-group-attached": isAttached,
   }
@@ -86,7 +88,8 @@ export function render(props) {
           size: itemSize ?? size,
           isDisabled: isDisabled || !!itemDisabled,
           isPressed,
-          isAriaPressed: isPressed ? true : undefined,
+          isAriaPressed: isSelection ? isPressed : undefined,
+          ariaLabel: children != null ? label : undefined,
           onClick: () => {
             if (!onChange) return
 

package/src/controls/select/style.css

@@ -124,7 +124,7 @@
         user-select: none;
         padding: var(--iw-space-2) var(--iw-space-3);
 
-        &:focused {
+        &:focus-visible {
           background-color: var(--iw-color-bg-secondary);
         }
 

package/src/data-display/data-grid/filters/helpers.js

@@ -6,3 +6,27 @@ export function format(value, type) {
     return new Date(value).getTime()
   return value
 }
+
+const DATE_LENGTH = 10
+const DATETIME_LENGTH = 16
+const MINUTE_MS = 60_000
+
+/**
+ * A filter value as its field shows it. Date fields read their text as UTC,
+ * datetime fields as local time, so each turns back the same way.
+ * @param {any} value
+ * @param {string} inputType
+ * @returns {string|number}
+ */
+export function toField(value, inputType) {
+  if (value == null || Number.isNaN(value)) return ""
+  if (typeof value !== "number") return value
+  if (inputType === "date") {
+    return new Date(value).toISOString().slice(0, DATE_LENGTH)
+  }
+  if (inputType === "datetime-local") {
+    const offset = new Date(value).getTimezoneOffset() * MINUTE_MS
+    return new Date(value - offset).toISOString().slice(0, DATETIME_LENGTH)
+  }
+  return value
+}

package/src/data-display/data-grid/filters/input.js

@@ -1,5 +1,5 @@
 import { Input } from "../../../controls/input/index.js"
-import { format } from "./helpers.js"
+import { format, toField } from "./helpers.js"
 
 const DEFAULT_PLACEHOLDER = {
   number: "=",
@@ -10,7 +10,9 @@ export const InputFilter = {
   render(entity, column) {
     return Input.render({
       name: column.id,
+      ariaLabel: column.filter.ariaLabel ?? `Filter ${column.title}`,
       inputType: column.filter.type,
+      value: toField(entity.filters[column.id], column.filter.type),
       placeholder:
         column.filter.placeholder ?? DEFAULT_PLACEHOLDER[column.filter.type],
       size: "sm",

package/src/data-display/data-grid/filters/range.js

@@ -1,7 +1,7 @@
 import { html } from "@inglorious/web"
 
 import { Input } from "../../../controls/input/index.js"
-import { format } from "./helpers.js"
+import { format, toField } from "./helpers.js"
 
 const RANGE_TYPE = {
   range: "number",
@@ -15,7 +15,12 @@ export const RangeFilter = {
     return html`<div class="iw-data-grid-filter-range">
       ${Input.render({
         name: `${column.id}Min`,
+        ariaLabel: column.filter.minLabel ?? `Filter ${column.title}: min`,
         inputType: RANGE_TYPE[column.filter.type],
+        value: toField(
+          entity.filters[column.id]?.min,
+          RANGE_TYPE[column.filter.type],
+        ),
         placeholder: column.filter.placeholder ?? "≥",
         size: "sm",
         isFullWidth: true,
@@ -29,7 +34,12 @@ export const RangeFilter = {
       })}
       ${Input.render({
         name: `${column.id}Max`,
+        ariaLabel: column.filter.maxLabel ?? `Filter ${column.title}: max`,
         inputType: RANGE_TYPE[column.filter.type],
+        value: toField(
+          entity.filters[column.id]?.max,
+          RANGE_TYPE[column.filter.type],
+        ),
         placeholder: column.filter.placeholder ?? "≤",
         size: "sm",
         isFullWidth: true,

package/src/data-display/data-grid/filters/select.js

@@ -5,6 +5,8 @@ export const SelectFilter = {
   render(entity, column) {
     return Select.render({
       name: column.id,
+      ariaLabel: column.filter.ariaLabel ?? `Filter ${column.title}`,
+      value: entity.filters[column.id] ?? "",
       size: "sm",
       isFullWidth: true,
       options: column.filter.options,

package/src/data-display/data-grid/template.js

@@ -117,16 +117,22 @@ export const DataGrid = {
       class="iw-data-grid-header-column"
       style=${getColumnStyle(column)}
     >
-      <div
-        @click=${() => column.isSortable && props.onSortChange?.(column.id)}
-        class="iw-data-grid-header-title"
-      >
-        ${column.title}
-        ${when(column.isSortable, () =>
-          getSortIcon(getSortDirection(props, column.id)),
-        )}
-      </div>
-
+      ${when(
+        column.isSortable,
+        () =>
+          html`<button
+            type="button"
+            class="iw-data-grid-header-title iw-data-grid-header-sort"
+            @click=${() => props.onSortChange?.(column.id)}
+          >
+            ${column.title}
+            <span aria-hidden="true"
+              >${getSortIcon(getSortDirection(props, column.id))}</span
+            >
+          </button>`,
+        () =>
+          html`<div class="iw-data-grid-header-title">${column.title}</div>`,
+      )}
       ${when(column.isFilterable, () => Filters.render(props, column))}
 
       <div
@@ -153,6 +159,7 @@ export const DataGrid = {
         size: "sm",
         isFullWidth: true,
         name: "search",
+        ariaLabel: props.search.ariaLabel ?? "Search",
         inputType: "text",
         placeholder: props.search.placeholder ?? "Fuzzy search...",
         value: props.search.value,

package/src/data-display/data-grid/theme.css

@@ -29,6 +29,22 @@
     white-space: nowrap;
   }
 
+  .iw-data-grid-header-sort {
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    font-weight: var(--iw-font-weight-bold);
+    text-align: start;
+    cursor: pointer;
+
+    &:focus-visible {
+      outline: 2px solid var(--iw-color-primary);
+      outline-offset: 2px;
+    }
+  }
+
   .iw-data-grid-column-resizer {
     &::after {
       content: "";

package/types/controls/button-group.d.ts

@@ -5,6 +5,7 @@ import type { Renderable } from "../shared/renderable"
 export interface ButtonGroupItem {
   id?: string
   value?: string
+  /** The button's text, or its accessible name when `children` are given */
   label: string
   children?: Renderable
   isDisabled?: boolean

package/types/controls/button.d.ts

@@ -21,6 +21,8 @@ export interface ButtonProps {
   isPressed?: boolean
   isFullWidth?: boolean
   buttonType?: "button" | "submit" | "reset" | "menu"
+  /** Renders a link styled as a button instead of a `<button>` */
+  href?: string
   ariaLabel?: string
   isAriaPressed?: boolean
   className?: string

package/types/data-display/data-grid.d.ts

@@ -36,6 +36,12 @@ export interface Column {
   filter?: {
     type: "text" | "number" | "range" | "select" | "date" | "time" | "datetime"
     options?: SelectOption[]
+    /** The filter field's accessible name. Defaults to "Filter <title>". */
+    ariaLabel?: string
+    /** A range filter's lower field's accessible name. */
+    minLabel?: string
+    /** A range filter's upper field's accessible name. */
+    maxLabel?: string
     [key: string]: any
   }
   /**
@@ -67,7 +73,12 @@ export interface DataGridProps<T extends Row = Row> {
   columns: Column[]
   sorts: { column: string; direction: "asc" | "desc" }[]
   filters: Record<string, any>
-  search: { value: string; placeholder?: string } | null
+  search: {
+    value: string
+    placeholder?: string
+    /** The search field's accessible name. Defaults to "Search". */
+    ariaLabel?: string
+  } | null
   isStriped?: boolean
   isVirtualized?: boolean
   virtualization?: DataGridVirtualization
@@ -166,36 +177,41 @@ export type DataGridType = {
   virtualMount(entity: DataGridProps, containerEl: HTMLElement): void
   virtualScroll(entity: DataGridProps, containerEl: HTMLElement): void
   render(entity: DataGridProps, api: Api): TemplateResult
-  renderDataGrid(entity: DataGridProps, api: Api): TemplateResult
-  renderHeader(entity: DataGridProps, api: Api): TemplateResult
-  renderToolbar(entity: DataGridProps, api: Api): TemplateResult
+  renderDataGrid(entity: DataGridProps): TemplateResult
+  renderHeader(entity: DataGridProps): TemplateResult
+  renderToolbar(entity: DataGridProps): TemplateResult
+  renderSearchbar(entity: DataGridProps): TemplateResult
   renderHeaderColumn(
     entity: DataGridProps,
     payload: { column: Column; index: number },
-    api: Api,
   ): TemplateResult
-  renderBody(entity: DataGridProps, api: Api): TemplateResult
+  renderBody(entity: DataGridProps): TemplateResult
   renderRow(
     entity: DataGridProps,
     payload: { row: Row; index: number },
-    api: Api,
   ): TemplateResult
   renderCell(
     entity: DataGridProps,
     payload: { cell: any; index: number; row?: Row },
-    api: Api,
   ): TemplateResult
   renderEditor(
     entity: DataGridProps,
     payload: { value: any; column: Column; row: Row; index: number },
-    api: Api,
   ): TemplateResult
-  renderEdits(entity: DataGridProps, editCount: number): TemplateResult
   renderValue(
     entity: DataGridProps,
     payload: { value: any; column: Column; index: number },
-    api: Api,
   ): any
+  renderFooter(entity: DataGridProps): TemplateResult
+  renderEdits(entity: DataGridProps, editCount: number): TemplateResult
+  renderPagination(
+    entity: DataGridProps,
+    pagination: DataGridPaginationInfo,
+  ): TemplateResult
+  renderPageSize(
+    entity: DataGridProps,
+    pagination: DataGridPaginationInfo,
+  ): TemplateResult
 }
 
 export declare const DataGrid: DataGridType