@aquera/nile-elements 1.6.2 → 1.6.3

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -19,6 +19,7 @@
     "./nile-badge": "./dist/src/nile-badge/index.js",
     "./nile-drawer": "./dist/src/nile-drawer/index.js",
     "./nile-checkbox": "./dist/src/nile-checkbox/index.js",
+    "./nile-checkbox-group": "./dist/src/nile-checkbox-group/index.js",
     "./nile-radio": "./dist/src/nile-radio/index.js",
     "./nile-radio-group": "./dist/src/nile-radio-group/index.js",
     "./nile-popup": "./dist/src/nile-popup/index.js",
@@ -223,4 +224,4 @@
       "prettier --write"
     ]
   }
-}
+}

package/src/index.ts

@@ -7,6 +7,7 @@ export { NileMenu } from './nile-menu';
 export { NileBadge } from './nile-badge';
 export { NileDrawer } from './nile-drawer';
 export { NileCheckbox } from './nile-checkbox';
+export { NileCheckboxGroup } from './nile-checkbox-group';
 export { NileRadio } from './nile-radio';
 export { NileRadioGroup } from './nile-radio-group';
 export { NilePopup } from './nile-popup';

package/src/internal/accessibility/a11y.custom-value.enum.ts

@@ -0,0 +1,69 @@
+export enum A11yCustomValue {
+  Date = 'Date',
+  Hero = 'Hero',
+  ListItem = 'List Item',
+  Pagination = 'Pagination',
+  Accordion = 'Accordion',
+  List = 'List',
+  Badge = 'Badge',
+  Breadcrumb = 'Breadcrumb',
+  BreadcrumbItem = 'Breadcrumb Item',
+  Button = 'Button',
+  ButtonToggle = 'Button Toggle',
+  ButtonToggleGroup = 'Button Toggle Group',
+  Dropdown = 'Dropdown',
+  LiteTooltip = 'Lite Tooltip',
+  Tag = 'Tag',
+  Toast = 'Toast',
+  Toolbar = 'Toolbar',
+  Tooltip = 'Tooltip',
+  StepperItem = 'Stepper Item',
+  Stepper = 'Stepper',
+  ResizePanel = 'Resize Panel',
+  SplitPanel = 'Split Panel',
+  HelpText = 'Help Text',
+  Loader = 'Loader',
+  ValueMin = '0',
+  ValueMax = '100',
+  Switch = 'Switch',
+  FormErrorMessage = 'Form Error Message',
+  ErrorMessage = 'Error Message',
+  ErrorNotification = 'Error Notification Message',
+  ErrorDescription = 'No Error Description',
+  EmptyState = 'Empty State Message',
+  EmptyStateDescription = 'No Empty State Description',
+  Drawer = 'Drawer',
+  CircularProgressBar = 'Circular Progress Bar',
+  Card = 'Card',
+  Avatar = 'Avatar',
+  VerticalStepperItem = 'Vertical Stepper Item',
+  Vertical = 'vertical',
+  Horizontal = 'horizontal',
+  Separator = 'Separator',
+  Checkbox = 'Checkbox',
+  TreeItem = 'Tree Item',
+  Select = 'Select',
+  Listbox = 'Listbox',
+  CodeEditor = 'Code Editor',
+  RichTextEditor = 'Rich Text Editor',
+  SkeletonLoader = 'Skeleton Loader',
+  Carousel = 'Carousel',
+  SlideShow = 'Slideshow',
+  InlineEdit = 'Inline Edit',
+  Link = 'Link',
+  Dialog = 'Dialog',
+  FileUpload = 'File Upload',
+  FilePreview = 'File Preview',
+  FloatingPanel = 'Floating Panel',
+  TabGroup = 'Tab Group',
+  Grid = 'Table Data',
+  GridRow = 'Grid Row',
+  GridBody = 'Grid Body',
+  GridHead = 'Grid Head',
+  Input = 'Input',
+  None = 'None',
+  SideBar = 'Sidebar',
+  InlineSidebar = 'Inline Sidebar',
+  Slider = 'Slider',
+  SlideToggle = 'Slide Toggle',
+}

package/src/internal/accessibility/a11y.property.enum.ts

@@ -0,0 +1,33 @@
+export enum A11yProperty {
+  AriaLabel = 'aria-label',
+  AriaLabelledby = 'aria-labelledby',
+  AriaDescribedby = 'aria-describedby',
+  AriaErrormessage = 'aria-errormessage',
+  AriaDetails = 'aria-details',
+  AriaControls = 'aria-controls',
+  AriaOwns = 'aria-owns',
+  AriaFlowto = 'aria-flowto',
+  AriaRoledescription = 'aria-roledescription',
+  AriaModal = 'aria-modal',
+  AriaOrientation = 'aria-orientation',
+  AriaKeyshortcuts = 'aria-keyshortcuts',
+  AriaValuenow = 'aria-valuenow',
+  AriaValuemin = 'aria-valuemin',
+  AriaValuemax = 'aria-valuemax',
+  AriaValuetext = 'aria-valuetext',
+  AriaLevel = 'aria-level',
+  AriaPosinset = 'aria-posinset',
+  AriaSetsize = 'aria-setsize',
+  AriaColcount = 'aria-colcount',
+  AriaColindex = 'aria-colindex',
+  AriaColspan = 'aria-colspan',
+  AriaRowcount = 'aria-rowcount',
+  AriaRowindex = 'aria-rowindex',
+  AriaRowspan = 'aria-rowspan',
+  AriaHasPopup = 'aria-haspopup',
+  AriaAutocomplete = 'aria-autocomplete',
+  AriaLive = 'aria-live',
+  AriaMultiselectable = 'aria-multiselectable',
+  AriaPlaceholder = 'aria-placeholder',
+  Tabindex = 'tabindex',
+}

package/src/internal/accessibility/a11y.role.enum.ts

@@ -0,0 +1,50 @@
+export enum A11yRole {
+  Button = 'button',
+  Checkbox = 'checkbox',
+  Dialog = 'dialog',
+  Grid = 'grid',
+  Gridcell = 'gridcell',
+  Link = 'link',
+  Listbox = 'listbox',
+  Menu = 'menu',
+  MenuItem = 'menuitem',
+  MenuItemCheckbox = 'menuitemcheckbox',
+  MenuItemRadio = 'menuitemradio',
+  Option = 'option',
+  Progressbar = 'progressbar',
+  Radio = 'radio',
+  Radiogroup = 'radiogroup',
+  Slider = 'slider',
+  Spinbutton = 'spinbutton',
+  Switch = 'switch',
+  Tab = 'tab',
+  Tablist = 'tablist',
+  Tabpanel = 'tabpanel',
+  Textbox = 'textbox',
+  Toolbar = 'toolbar',
+  Image = 'img',
+  Combobox = 'combobox',
+  Status = 'status',
+  Tooltip = 'tooltip',
+  Accordion = 'accordion',
+  Group = 'group',
+  Tree = 'tree',
+  Treeitem = 'treeitem',
+  Region = 'region',
+  Separator = 'separator',
+  Alert = 'alert',
+  Navigation = 'navigation',
+  List = 'list',
+  ListItem = 'listitem',
+  Note = 'note',
+  Timer = 'timer',
+  Presentation = 'presentation',
+  Application = 'application',
+  Rowgroup = 'rowgroup',
+  Row = 'row',
+  Columnheader = 'columnheader',
+  Table = 'table',
+  Cell = 'cell',
+  Text = 'text',
+  None = 'none',
+}

package/src/internal/accessibility/a11y.state.enum.ts

@@ -0,0 +1,17 @@
+export enum A11yState {
+  AriaChecked = 'aria-checked',
+  AriaSelected = 'aria-selected',
+  AriaDisabled = 'aria-disabled',
+  AriaExpanded = 'aria-expanded',
+  AriaInvalid = 'aria-invalid',
+  AriaHidden = 'aria-hidden',
+  AriaPressed = 'aria-pressed',
+  AriaCurrent = 'aria-current',
+  AriaBusy = 'aria-busy',
+  AriaRequired = 'aria-required',
+  AriaReadonly = 'aria-readonly',
+  AriaValueNow = 'aria-valuenow',
+  AriaValueMin = 'aria-valuemin',
+  AriaValueMax = 'aria-valuemax',
+  AriaSort = 'aria-sort',
+}

package/src/internal/accessibility/accessibility.const.ts

@@ -0,0 +1,9 @@
+import { A11yRole } from "./a11y.role.enum";
+import { A11yProperty } from "./a11y.property.enum";
+import { A11yState } from "./a11y.state.enum";
+
+export const ACCESSIBILITY = {
+  ROLE: A11yRole,
+  PROPERTIES: A11yProperty,
+  STATES: A11yState
+} as const;

package/src/internal/accessibility/role.enum.ts

@@ -0,0 +1,3 @@
+export enum Role {
+  Role = 'role',
+}

package/src/internal/nile-element.ts

@@ -1,4 +1,7 @@
 import { LitElement } from 'lit';
+import { A11yState } from './accessibility/a11y.state.enum';
+import { A11yProperty } from './accessibility/a11y.property.enum';
+import { Role } from './accessibility/role.enum';
 
 export default class NileElement extends LitElement {
   protected BUBBLES: boolean = true;
@@ -52,3 +55,99 @@ export interface NileFormControl extends NileElement {
   setCustomValidity: (message: string) => void;
 }
 
+export interface A11yMetadataOptions {
+  [Role.Role]?: string;
+
+  [A11yState.AriaDisabled]?: boolean;
+  [A11yState.AriaChecked]?: boolean;
+  [A11yState.AriaSelected]?: boolean;
+  [A11yState.AriaExpanded]?: boolean;
+  [A11yState.AriaInvalid]?: boolean;
+  [A11yState.AriaHidden]?: boolean;
+  [A11yState.AriaPressed]?: boolean;
+  [A11yState.AriaCurrent]?: string | boolean;
+  [A11yState.AriaBusy]?: boolean;
+  [A11yState.AriaRequired]?: boolean;
+  [A11yState.AriaReadonly]?: boolean;
+  [A11yState.AriaValueNow]?: string;
+  [A11yState.AriaValueMin]?: string;
+  [A11yState.AriaValueMax]?: string;
+  [A11yState.AriaSort]?: string;
+
+  [A11yProperty.AriaLabel]?: string;
+  [A11yProperty.AriaLabelledby]?: string;
+  [A11yProperty.AriaDescribedby]?: string;
+  [A11yProperty.AriaErrormessage]?: string;
+  [A11yProperty.AriaDetails]?: string;
+  [A11yProperty.AriaControls]?: string;
+  [A11yProperty.AriaOwns]?: string;
+  [A11yProperty.AriaFlowto]?: string;
+  [A11yProperty.AriaRoledescription]?: string;
+  [A11yProperty.AriaModal]?: string;
+  [A11yProperty.AriaOrientation]?: string;
+  [A11yProperty.AriaKeyshortcuts]?: string;
+  [A11yProperty.AriaValuenow]?: string;
+  [A11yProperty.AriaValuemin]?: string;
+  [A11yProperty.AriaValuemax]?: string;
+  [A11yProperty.AriaValuetext]?: string;
+  [A11yProperty.AriaLevel]?: string;
+  [A11yProperty.AriaPosinset]?: string;
+  [A11yProperty.AriaSetsize]?: string;
+  [A11yProperty.AriaColcount]?: string;
+  [A11yProperty.AriaColindex]?: string;
+  [A11yProperty.AriaColspan]?: string;
+  [A11yProperty.AriaRowcount]?: string;
+  [A11yProperty.AriaRowindex]?: string;
+  [A11yProperty.AriaRowspan]?: string;
+  [A11yProperty.AriaAutocomplete]?: string;
+  [A11yProperty.AriaPlaceholder]?: string;
+  [A11yProperty.AriaHasPopup]?: string;
+  [A11yProperty.Tabindex]?: string;
+  [A11yProperty.AriaMultiselectable]?: string;
+}
+
+export function setupA11yMetadata(el: HTMLElement, options: A11yMetadataOptions = {}) {
+  const role = options[Role.Role];
+  if (role && !el.hasAttribute(Role.Role)) {
+    el.setAttribute(Role.Role, role);
+  }
+
+  const missingLabel = !el.hasAttribute(A11yProperty.AriaLabelledby) && !el.hasAttribute(A11yProperty.AriaLabel);
+  if (missingLabel) {
+    const fallbackLabel = options[A11yProperty.AriaLabel] ?? options[A11yProperty.AriaLabelledby] ?? (options[A11yProperty.AriaLabelledby] ? (el as any).value : null);
+    if (fallbackLabel?.trim()) {
+      el.setAttribute(A11yProperty.AriaLabel, fallbackLabel.trim());
+    }
+  }
+
+  const disabled = options[A11yState.AriaDisabled];
+  if (disabled === true) {
+    el.setAttribute(A11yState.AriaDisabled, 'true');
+  } else if (disabled === false) {
+    el.removeAttribute(A11yState.AriaDisabled);
+  }
+
+  for (const property of Object.values(A11yProperty)) {
+    const value = (options as any)[property];
+    if (value !== undefined && !el.hasAttribute(property)) {
+      el.setAttribute(property, String(value));
+    }
+  }
+
+  for (const state of Object.values(A11yState)) {
+    if (state === A11yState.AriaDisabled) continue;
+    const value = (options as any)[state];
+    if (value === undefined) continue;
+    el.setAttribute(state, String(value));
+  }
+}
+
+function getLabelFromSlots(el: HTMLElement): string | null {
+  const slot = el.querySelector('[slot="label"]');
+  return slot?.textContent?.trim() || null;
+}
+
+function getLabelFromText(el: HTMLElement): string | null {
+  const text = el.textContent?.trim();
+  return text || null;
+}

package/src/nile-avatar/nile-avatar.ts

@@ -139,6 +139,7 @@ export class NileAvatar extends NileElement {
         variant__light_blue: variant__code === 3 && !this.bgColor,
         variant__green: variant__code === 4 && !this.bgColor,
       })}
+      aria-hidden="true"
       part="avatar__content"
       style="
         background-color: ${this.bgColor};
@@ -165,6 +166,7 @@ export class NileAvatar extends NileElement {
     <img
       src="${this.src}"
       class="avatar"
+      alt="${this.name || 'Avatar'}"
       class=${classMap({
         avatar: true,
         avatar__xs: this.size === 'xs',

package/src/nile-badge/nile-badge.ts

@@ -15,8 +15,12 @@ import { styles } from './nile-badge.css';
 import '../nile-icon-button/nile-icon-button';
 import { classMap } from 'lit/directives/class-map.js';
 import { customElement, property } from 'lit/decorators.js';
-import NileElement from '../internal/nile-element';
+import NileElement, { setupA11yMetadata } from '../internal/nile-element';
 import type { CSSResultGroup } from 'lit';
+import { A11yProperty } from '../internal/accessibility/a11y.property.enum';
+import { A11yRole } from '../internal/accessibility/a11y.role.enum';
+import { Role } from '../internal/accessibility/role.enum';
+import { A11yCustomValue } from '../internal/accessibility/a11y.custom-value.enum';
 /**
  * Nile icon component.
  *
@@ -44,6 +48,14 @@ import type { CSSResultGroup } from 'lit';
 export class NileBadge extends NileElement {
   static styles: CSSResultGroup = styles;
 
+  connectedCallback(): void {
+    super.connectedCallback();
+    setupA11yMetadata(this, {
+      [Role.Role]: A11yRole.Text,
+      [A11yProperty.AriaLabel]: this.textContent?.trim() || A11yCustomValue.Badge,
+    });
+  }
+
   /** The badge's theme variant. */
   @property({ reflect: true }) variant:
     | 'primary'

package/src/nile-checkbox/nile-checkbox.css.ts

@@ -207,6 +207,10 @@ export const styles = css`
     --nile-svg-stroke-width: var(--nile-icon-stroke-width-1-3, var(--ng-icon-stroke-width-2-5));
   }
 
+  .checkbox--disabled .checkbox__label {
+    color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));
+  }
+
   .checkbox__helptext-icon {
     float: right;
     cursor: pointer;

package/src/nile-checkbox/nile-checkbox.ts

@@ -106,6 +106,9 @@ export class NileCheckbox extends NileElement {
    */
   @property({ reflect: true }) form = '';
  
+  /** Associates this checkbox with a nile-checkbox-group via a shared group name. */
+  @property({ reflect: true }) group = '';
+
   /** Makes the checkbox a required field. */
   @property({ type: Boolean, reflect: true }) required = false;
  

package/src/nile-checkbox-group/index.ts

@@ -0,0 +1 @@
+export { NileCheckboxGroup } from './nile-checkbox-group';

package/src/nile-checkbox-group/nile-checkbox-group.css.ts

@@ -0,0 +1,70 @@
+import { css } from 'lit';
+
+export const styles = css`
+
+  :host {
+    display: block;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+  }
+
+  ::slotted(nile-checkbox) {
+    display: block;
+    margin-bottom: var(--nile-spacing-md, var(--ng-spacing-md));
+  }
+
+  ::slotted(nile-checkbox:last-of-type) {
+    margin-bottom: 0;
+  }
+
+  .form-control--inline-checkbox ::slotted(nile-checkbox) {
+    display: inline-block;
+    margin-bottom: 0;
+    margin-right: var(--nile-spacing-3xl, var(--ng-spacing-3xl));
+  }
+
+  .form-control {
+    border: none;
+    padding: var(--nile-spacing-none, var(--ng-spacing-none));
+    margin: var(--nile-spacing-none, var(--ng-spacing-none));
+  }
+
+  .form-control__label {
+    display: block;
+    padding: var(--nile-spacing-none, var(--ng-spacing-none));
+    margin-bottom: var(--nile-spacing-md, var(--ng-spacing-md));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-style: normal;
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-xs));
+    letter-spacing: 0.2px;
+  }
+
+  .form-control-input {
+    margin-bottom: var(--nile-spacing-md, var(--ng-spacing-md));
+  }
+
+  .checkbox-group--required .checkbox-group__label::after {
+    content: '*';
+    margin-inline-start: -2px;
+  }
+
+  .form-control--bordered {
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border-radius: var(--nile-radius-radius-sm, var(--ng-radius-sm));
+    padding: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    margin: var(--nile-spacing-none, var(--ng-spacing-none));
+  }
+
+  .form-control__legend {
+    padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xs, var(--ng-spacing-xs));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
+    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-xs));
+  }
+`;