@inglorious/ui 9.0.0 → 9.1.1

package/src/surfaces/card/style.css

@@ -11,6 +11,21 @@
     transform var(--iw-transition-normal);
 }
 
+/* Set into the page rather than raised from it, for content grouped inside
+   another surface. */
+.iw-card-sunk {
+  background-color: var(--iw-color-bg-secondary, var(--iw-card-bg));
+  border-color: transparent;
+  box-shadow: none;
+}
+
+/* Only the grouping: no surface at all. */
+.iw-card-clear {
+  background-color: transparent;
+  border-color: transparent;
+  box-shadow: none;
+}
+
 .iw-card-hoverable:hover {
   box-shadow: var(--iw-card-shadow-hover);
 }

package/src/surfaces/card/template.js

@@ -6,6 +6,7 @@
 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 { applyElementProps } from "../../shared/apply-element-props.js"
 
@@ -30,6 +31,7 @@ export const Card = {
     const {
       type, // eslint-disable-line no-unused-vars
       element = "article",
+      variant = "default",
       isHoverable = false,
       isClickable = false,
       isFullWidth = false,
@@ -47,6 +49,7 @@ export const Card = {
 
     const classes = {
       "iw-card": true,
+      [`iw-card-${variant}`]: variant !== "default",
       "iw-card-hoverable": isHoverable || isClickable,
       "iw-card-clickable": isClickable,
       "iw-card-full-width": isFullWidth,
@@ -93,8 +96,8 @@ export const Card = {
         [`iw-card-header-padding-${headerPadding}`]: headerPadding !== "md",
       })}
     >
-      ${title ? html`<h3 class="iw-card-title">${title}</h3>` : null}
-      ${subtitle ? html`<p class="iw-card-subtitle">${subtitle}</p>` : null}
+      ${when(title, () => html`<h3 class="iw-card-title">${title}</h3>`)}
+      ${when(subtitle, () => html`<p class="iw-card-subtitle">${subtitle}</p>`)}
     </div>`
   },
 

package/types/controls/button.d.ts

@@ -13,7 +13,7 @@ export interface ButtonProps {
     | "warning"
     | "error"
     | "info"
-  size?: "sm" | "md" | "lg"
+  size?: "xs" | "sm" | "md" | "lg"
   shape?: "rectangle" | "pill" | "round" | "square"
   isDisabled?: boolean
   isPressed?: boolean

package/types/controls/checkbox.d.ts

@@ -4,6 +4,8 @@ export interface CheckboxProps {
   id?: string
   name?: string
   label?: string
+  /** A line of detail under the label. */
+  description?: string
   isChecked?: boolean
   isDisabled?: boolean
   isRequired?: boolean

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

@@ -2,6 +2,8 @@ import type { TemplateResult } from "@inglorious/web"
 
 export interface RadioOption {
   label: string
+  /** A line of detail under the label. */
+  description?: string
   value: string
   isDisabled?: boolean
   [key: string]: unknown

package/types/controls/slider.d.ts

@@ -4,7 +4,8 @@ export interface SliderProps {
   id?: string
   name?: string
   label?: string
-  value?: number
+  /** One number, or `[low, high]` for a range with a thumb at each end. */
+  value?: number | [number, number]
   min?: number
   max?: number
   step?: number
@@ -12,7 +13,10 @@ export interface SliderProps {
   isDisabled?: boolean
   isValueVisible?: boolean
   isFullWidth?: boolean
-  onChange?: (value: number) => void
+  /** Draws a tick at every step, for a slider that moves in clear steps. */
+  hasMarks?: boolean
+  /** The new value, in the shape `value` has: a number, or `[low, high]`. */
+  onChange?: (value: number | [number, number]) => void
   [key: string]: unknown
 }
 

package/types/controls/switch.d.ts

@@ -4,6 +4,8 @@ export interface SwitchProps {
   id?: string
   name?: string
   label?: string
+  /** A line of detail under the label. */
+  description?: string
   isChecked?: boolean
   isDisabled?: boolean
   color?: "primary" | "secondary" | "success" | "warning" | "error" | "info"

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

@@ -3,6 +3,8 @@ import type { TemplateResult } from "@inglorious/web"
 export interface ChipProps {
   id?: string
   children?: TemplateResult | string | number
+  /** Shown before the label, such as an `Icon.render(...)`. Decorative. */
+  icon?: TemplateResult
   isRemovable?: boolean
   color?:
     | "default"

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

@@ -4,6 +4,8 @@ export interface DividerProps {
   id?: string
   orientation?: "horizontal" | "vertical"
   isInset?: boolean
+  /** Only visual: hidden from assistive tech, which otherwise announces a separator. */
+  isDecorative?: boolean
   [key: string]: unknown
 }
 

package/types/feedback/alert.d.ts

@@ -6,7 +6,7 @@ export interface AlertProps {
   title?: TemplateResult | string | number
   description?: TemplateResult | string | number
   children?: TemplateResult | string | number
-  severity?: "info" | "success" | "warning" | "error"
+  severity?: "info" | "success" | "warning" | "error" | "neutral"
   variant?: "filled" | "outlined"
   icon?: TemplateResult | string | number
   action?: TemplateResult | string | number

package/types/feedback/dialog.d.ts

@@ -6,6 +6,8 @@ export interface DialogProps {
   isOpen?: boolean
   /** Modal by default; `false` shows the dialog in place, with the page still usable. */
   isModal?: boolean
+  /** Its width: `"sm"`, `"md"` (default) or `"lg"`. */
+  size?: "sm" | "md" | "lg"
   title?: TemplateResult | string | number
   description?: TemplateResult | string | number
   children?: TemplateResult | string | number

package/types/layout/flex.d.ts

@@ -16,7 +16,7 @@ export interface FlexProps {
   wrap?: "nowrap" | "wrap" | "wrap-reverse"
   justify?: "start" | "center" | "end" | "between" | "around" | "evenly"
   align?: "stretch" | "start" | "center" | "end" | "baseline"
-  gap?: "none" | "sm" | "md" | "lg" | "xl"
+  gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
   padding?: "none" | "sm" | "md" | "lg" | "xl"
   overflow?: "visible" | "hidden" | "clip" | "scroll" | "auto"
   isInline?: boolean

package/types/surfaces/card.d.ts

@@ -12,6 +12,11 @@ export interface CardProps {
     | "footer"
     | "nav"
     | "aside"
+  /**
+   * The surface: raised (`"default"`), `"sunk"` into the page for content
+   * inside another surface, or `"clear"` with none.
+   */
+  variant?: "default" | "sunk" | "clear"
   title?: TemplateResult | string | number
   subtitle?: TemplateResult | string | number
   header?: TemplateResult | string | number