npm - @aquera/nile-elements - Versions diffs - 1.6.2 → 1.6.3 - Mend

@aquera/nile-elements 1.6.2 → 1.6.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (680) hide show

package/dist/src/internal/accessibility/a11y.property.enum.d.ts ADDED Viewed

@@ -0,0 +1,33 @@
+export declare 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/dist/src/internal/accessibility/a11y.property.enum.js ADDED Viewed

@@ -0,0 +1,35 @@
+export var A11yProperty;
+(function (A11yProperty) {
+    A11yProperty["AriaLabel"] = "aria-label";
+    A11yProperty["AriaLabelledby"] = "aria-labelledby";
+    A11yProperty["AriaDescribedby"] = "aria-describedby";
+    A11yProperty["AriaErrormessage"] = "aria-errormessage";
+    A11yProperty["AriaDetails"] = "aria-details";
+    A11yProperty["AriaControls"] = "aria-controls";
+    A11yProperty["AriaOwns"] = "aria-owns";
+    A11yProperty["AriaFlowto"] = "aria-flowto";
+    A11yProperty["AriaRoledescription"] = "aria-roledescription";
+    A11yProperty["AriaModal"] = "aria-modal";
+    A11yProperty["AriaOrientation"] = "aria-orientation";
+    A11yProperty["AriaKeyshortcuts"] = "aria-keyshortcuts";
+    A11yProperty["AriaValuenow"] = "aria-valuenow";
+    A11yProperty["AriaValuemin"] = "aria-valuemin";
+    A11yProperty["AriaValuemax"] = "aria-valuemax";
+    A11yProperty["AriaValuetext"] = "aria-valuetext";
+    A11yProperty["AriaLevel"] = "aria-level";
+    A11yProperty["AriaPosinset"] = "aria-posinset";
+    A11yProperty["AriaSetsize"] = "aria-setsize";
+    A11yProperty["AriaColcount"] = "aria-colcount";
+    A11yProperty["AriaColindex"] = "aria-colindex";
+    A11yProperty["AriaColspan"] = "aria-colspan";
+    A11yProperty["AriaRowcount"] = "aria-rowcount";
+    A11yProperty["AriaRowindex"] = "aria-rowindex";
+    A11yProperty["AriaRowspan"] = "aria-rowspan";
+    A11yProperty["AriaHasPopup"] = "aria-haspopup";
+    A11yProperty["AriaAutocomplete"] = "aria-autocomplete";
+    A11yProperty["AriaLive"] = "aria-live";
+    A11yProperty["AriaMultiselectable"] = "aria-multiselectable";
+    A11yProperty["AriaPlaceholder"] = "aria-placeholder";
+    A11yProperty["Tabindex"] = "tabindex";
+})(A11yProperty || (A11yProperty = {}));
+//# sourceMappingURL=a11y.property.enum.js.map

package/dist/src/internal/accessibility/a11y.property.enum.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"a11y.property.enum.js","sourceRoot":"","sources":["../../../../src/internal/accessibility/a11y.property.enum.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,YAgCX;AAhCD,WAAY,YAAY;IACtB,wCAAwB,CAAA;IACxB,kDAAkC,CAAA;IAClC,oDAAoC,CAAA;IACpC,sDAAsC,CAAA;IACtC,4CAA4B,CAAA;IAC5B,8CAA8B,CAAA;IAC9B,sCAAsB,CAAA;IACtB,0CAA0B,CAAA;IAC1B,4DAA4C,CAAA;IAC5C,wCAAwB,CAAA;IACxB,oDAAoC,CAAA;IACpC,sDAAsC,CAAA;IACtC,8CAA8B,CAAA;IAC9B,8CAA8B,CAAA;IAC9B,8CAA8B,CAAA;IAC9B,gDAAgC,CAAA;IAChC,wCAAwB,CAAA;IACxB,8CAA8B,CAAA;IAC9B,4CAA4B,CAAA;IAC5B,8CAA8B,CAAA;IAC9B,8CAA8B,CAAA;IAC9B,4CAA4B,CAAA;IAC5B,8CAA8B,CAAA;IAC9B,8CAA8B,CAAA;IAC9B,4CAA4B,CAAA;IAC5B,8CAA8B,CAAA;IAC9B,sDAAsC,CAAA;IACtC,sCAAsB,CAAA;IACtB,4DAA4C,CAAA;IAC5C,oDAAoC,CAAA;IACpC,qCAAqB,CAAA;AACvB,CAAC,EAhCW,YAAY,KAAZ,YAAY,QAgCvB","sourcesContent":["export enum A11yProperty {\n AriaLabel = 'aria-label',\n AriaLabelledby = 'aria-labelledby',\n AriaDescribedby = 'aria-describedby',\n AriaErrormessage = 'aria-errormessage',\n AriaDetails = 'aria-details',\n AriaControls = 'aria-controls',\n AriaOwns = 'aria-owns',\n AriaFlowto = 'aria-flowto',\n AriaRoledescription = 'aria-roledescription',\n AriaModal = 'aria-modal',\n AriaOrientation = 'aria-orientation',\n AriaKeyshortcuts = 'aria-keyshortcuts',\n AriaValuenow = 'aria-valuenow',\n AriaValuemin = 'aria-valuemin',\n AriaValuemax = 'aria-valuemax',\n AriaValuetext = 'aria-valuetext',\n AriaLevel = 'aria-level',\n AriaPosinset = 'aria-posinset',\n AriaSetsize = 'aria-setsize',\n AriaColcount = 'aria-colcount',\n AriaColindex = 'aria-colindex',\n AriaColspan = 'aria-colspan',\n AriaRowcount = 'aria-rowcount',\n AriaRowindex = 'aria-rowindex',\n AriaRowspan = 'aria-rowspan',\n AriaHasPopup = 'aria-haspopup',\n AriaAutocomplete = 'aria-autocomplete',\n AriaLive = 'aria-live',\n AriaMultiselectable = 'aria-multiselectable',\n AriaPlaceholder = 'aria-placeholder',\n Tabindex = 'tabindex',\n}"]}

package/dist/src/internal/accessibility/a11y.role.enum.d.ts ADDED Viewed

@@ -0,0 +1,50 @@
+export declare 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/dist/src/internal/accessibility/a11y.role.enum.js ADDED Viewed

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

package/dist/src/internal/accessibility/a11y.role.enum.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"a11y.role.enum.js","sourceRoot":"","sources":["../../../../src/internal/accessibility/a11y.role.enum.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,QAiDX;AAjDD,WAAY,QAAQ;IAClB,6BAAiB,CAAA;IACjB,iCAAqB,CAAA;IACrB,6BAAiB,CAAA;IACjB,yBAAa,CAAA;IACb,iCAAqB,CAAA;IACrB,yBAAa,CAAA;IACb,+BAAmB,CAAA;IACnB,yBAAa,CAAA;IACb,iCAAqB,CAAA;IACrB,iDAAqC,CAAA;IACrC,2CAA+B,CAAA;IAC/B,6BAAiB,CAAA;IACjB,uCAA2B,CAAA;IAC3B,2BAAe,CAAA;IACf,qCAAyB,CAAA;IACzB,6BAAiB,CAAA;IACjB,qCAAyB,CAAA;IACzB,6BAAiB,CAAA;IACjB,uBAAW,CAAA;IACX,+BAAmB,CAAA;IACnB,iCAAqB,CAAA;IACrB,+BAAmB,CAAA;IACnB,+BAAmB,CAAA;IACnB,yBAAa,CAAA;IACb,iCAAqB,CAAA;IACrB,6BAAiB,CAAA;IACjB,+BAAmB,CAAA;IACnB,mCAAuB,CAAA;IACvB,2BAAe,CAAA;IACf,yBAAa,CAAA;IACb,iCAAqB,CAAA;IACrB,6BAAiB,CAAA;IACjB,mCAAuB,CAAA;IACvB,2BAAe,CAAA;IACf,qCAAyB,CAAA;IACzB,yBAAa,CAAA;IACb,iCAAqB,CAAA;IACrB,yBAAa,CAAA;IACb,2BAAe,CAAA;IACf,yCAA6B,CAAA;IAC7B,uCAA2B,CAAA;IAC3B,iCAAqB,CAAA;IACrB,uBAAW,CAAA;IACX,yCAA6B,CAAA;IAC7B,2BAAe,CAAA;IACf,yBAAa,CAAA;IACb,yBAAa,CAAA;IACb,yBAAa,CAAA;AACf,CAAC,EAjDW,QAAQ,KAAR,QAAQ,QAiDnB","sourcesContent":["export enum A11yRole {\n Button = 'button',\n Checkbox = 'checkbox',\n Dialog = 'dialog',\n Grid = 'grid',\n Gridcell = 'gridcell',\n Link = 'link',\n Listbox = 'listbox',\n Menu = 'menu',\n MenuItem = 'menuitem',\n MenuItemCheckbox = 'menuitemcheckbox',\n MenuItemRadio = 'menuitemradio',\n Option = 'option',\n Progressbar = 'progressbar',\n Radio = 'radio',\n Radiogroup = 'radiogroup',\n Slider = 'slider',\n Spinbutton = 'spinbutton',\n Switch = 'switch',\n Tab = 'tab',\n Tablist = 'tablist',\n Tabpanel = 'tabpanel',\n Textbox = 'textbox',\n Toolbar = 'toolbar',\n Image = 'img',\n Combobox = 'combobox',\n Status = 'status',\n Tooltip = 'tooltip',\n Accordion = 'accordion',\n Group = 'group',\n Tree = 'tree',\n Treeitem = 'treeitem',\n Region = 'region',\n Separator = 'separator',\n Alert = 'alert',\n Navigation = 'navigation',\n List = 'list',\n ListItem = 'listitem',\n Note = 'note',\n Timer = 'timer',\n Presentation = 'presentation',\n Application = 'application',\n Rowgroup = 'rowgroup',\n Row = 'row',\n Columnheader = 'columnheader',\n Table = 'table',\n Cell = 'cell',\n Text = 'text',\n None = 'none',\n}"]}

package/dist/src/internal/accessibility/a11y.state.enum.d.ts ADDED Viewed

@@ -0,0 +1,17 @@
+export declare 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/dist/src/internal/accessibility/a11y.state.enum.js ADDED Viewed

@@ -0,0 +1,19 @@
+export var A11yState;
+(function (A11yState) {
+    A11yState["AriaChecked"] = "aria-checked";
+    A11yState["AriaSelected"] = "aria-selected";
+    A11yState["AriaDisabled"] = "aria-disabled";
+    A11yState["AriaExpanded"] = "aria-expanded";
+    A11yState["AriaInvalid"] = "aria-invalid";
+    A11yState["AriaHidden"] = "aria-hidden";
+    A11yState["AriaPressed"] = "aria-pressed";
+    A11yState["AriaCurrent"] = "aria-current";
+    A11yState["AriaBusy"] = "aria-busy";
+    A11yState["AriaRequired"] = "aria-required";
+    A11yState["AriaReadonly"] = "aria-readonly";
+    A11yState["AriaValueNow"] = "aria-valuenow";
+    A11yState["AriaValueMin"] = "aria-valuemin";
+    A11yState["AriaValueMax"] = "aria-valuemax";
+    A11yState["AriaSort"] = "aria-sort";
+})(A11yState || (A11yState = {}));
+//# sourceMappingURL=a11y.state.enum.js.map

package/dist/src/internal/accessibility/a11y.state.enum.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"a11y.state.enum.js","sourceRoot":"","sources":["../../../../src/internal/accessibility/a11y.state.enum.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,SAgBX;AAhBD,WAAY,SAAS;IACnB,yCAA4B,CAAA;IAC5B,2CAA8B,CAAA;IAC9B,2CAA8B,CAAA;IAC9B,2CAA8B,CAAA;IAC9B,yCAA4B,CAAA;IAC5B,uCAA0B,CAAA;IAC1B,yCAA4B,CAAA;IAC5B,yCAA4B,CAAA;IAC5B,mCAAsB,CAAA;IACtB,2CAA8B,CAAA;IAC9B,2CAA8B,CAAA;IAC9B,2CAA8B,CAAA;IAC9B,2CAA8B,CAAA;IAC9B,2CAA8B,CAAA;IAC9B,mCAAsB,CAAA;AACxB,CAAC,EAhBW,SAAS,KAAT,SAAS,QAgBpB","sourcesContent":["export enum A11yState {\n AriaChecked = 'aria-checked',\n AriaSelected = 'aria-selected',\n AriaDisabled = 'aria-disabled',\n AriaExpanded = 'aria-expanded',\n AriaInvalid = 'aria-invalid',\n AriaHidden = 'aria-hidden',\n AriaPressed = 'aria-pressed',\n AriaCurrent = 'aria-current',\n AriaBusy = 'aria-busy',\n AriaRequired = 'aria-required',\n AriaReadonly = 'aria-readonly',\n AriaValueNow = 'aria-valuenow',\n AriaValueMin = 'aria-valuemin',\n AriaValueMax = 'aria-valuemax',\n AriaSort = 'aria-sort',\n}"]}

package/dist/src/internal/accessibility/accessibility.const.d.ts ADDED Viewed

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

package/dist/src/internal/accessibility/accessibility.const.js ADDED Viewed

@@ -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
+};
+//# sourceMappingURL=accessibility.const.js.map

package/dist/src/internal/accessibility/accessibility.const.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"accessibility.const.js","sourceRoot":"","sources":["../../../../src/internal/accessibility/accessibility.const.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE9C,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,IAAI,EAAE,QAAQ;IACd,UAAU,EAAE,YAAY;IACxB,MAAM,EAAE,SAAS;CACT,CAAC","sourcesContent":["import { A11yRole } from \"./a11y.role.enum\";\nimport { A11yProperty } from \"./a11y.property.enum\";\nimport { A11yState } from \"./a11y.state.enum\";\n\nexport const ACCESSIBILITY = {\n ROLE: A11yRole,\n PROPERTIES: A11yProperty,\n STATES: A11yState\n} as const;"]}

package/dist/src/internal/accessibility/role.enum.d.ts ADDED Viewed

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

package/dist/src/internal/accessibility/role.enum.js ADDED Viewed

@@ -0,0 +1,5 @@
+export var Role;
+(function (Role) {
+    Role["Role"] = "role";
+})(Role || (Role = {}));
+//# sourceMappingURL=role.enum.js.map

package/dist/src/internal/accessibility/role.enum.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"role.enum.js","sourceRoot":"","sources":["../../../../src/internal/accessibility/role.enum.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,IAEX;AAFD,WAAY,IAAI;IACd,qBAAa,CAAA;AACf,CAAC,EAFW,IAAI,KAAJ,IAAI,QAEf","sourcesContent":["export enum Role {\n Role = 'role',\n}"]}

package/dist/src/internal/nile-element.d.ts CHANGED Viewed

@@ -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;
     protected COMPOSED: boolean;
@@ -27,3 +30,52 @@ export interface NileFormControl extends NileElement {
     reportValidity: () => boolean;
     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 declare function setupA11yMetadata(el: HTMLElement, options?: A11yMetadataOptions): void;

package/dist/src/internal/nile-element.js CHANGED Viewed

@@ -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 {
     constructor() {
         super(...arguments);
@@ -18,4 +21,46 @@ export default class NileElement extends LitElement {
         return event;
     }
 }
+export function setupA11yMetadata(el, options = {}) {
+    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.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[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[state];
+        if (value === undefined)
+            continue;
+        el.setAttribute(state, String(value));
+    }
+}
+function getLabelFromSlots(el) {
+    const slot = el.querySelector('[slot="label"]');
+    return slot?.textContent?.trim() || null;
+}
+function getLabelFromText(el) {
+    const text = el.textContent?.trim();
+    return text || null;
+}
 //# sourceMappingURL=nile-element.js.map

package/dist/src/internal/nile-element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-element.js","sourceRoot":"","sources":["../../../src/internal/nile-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;~~AAEjC~~,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,UAAU;IAAnD;;QACY,YAAO,GAAY,IAAI,CAAC;QACxB,aAAQ,GAAY,IAAI,CAAC;QACzB,eAAU,GAAY,KAAK,CAAC;IAiBxC,CAAC;IAfC,0DAA0D;IAC1D,IAAI,CAAC,IAAY,EAAE,MAAY,EAAE,OAAiB,EAAG,QAAkB,EAAE,UAAoB;QAC3F,MAAM,KAAK,GAAG,IAAI,WAAW,CAC3B,IAAI,EACJ;YACE,OAAO,EAAE,OAAO,IAAI,IAAI,CAAC,OAAO;YAChC,UAAU,EAAE,UAAU,IAAI,IAAI,CAAC,UAAU;YACzC,QAAQ,EAAE,QAAQ,IAAI,IAAI,CAAC,QAAQ;YACnC,MAAM;SACP,CACF,CAAC;QAEF,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC1B,OAAO,KAAK,CAAC;IACf,CAAC;CACF","sourcesContent":["import { LitElement } from 'lit';\n\nexport default class NileElement extends LitElement {\n protected BUBBLES: boolean = true;\n protected COMPOSED: boolean = true;\n protected CANCELABLE: boolean = false;\n\n /** Emits a custom event with more convenient defaults. */\n emit(name: string, detail?: any, bubbles?: boolean , composed?: boolean, cancelable?: boolean) {\n const event = new CustomEvent(\n name, \n {\n bubbles: bubbles ?? this.BUBBLES,\n cancelable: cancelable ?? this.CANCELABLE,\n composed: composed ?? this.COMPOSED,\n detail\n }\n );\n\n this.dispatchEvent(event);\n return event;\n }\n}\n\n\nexport interface NileFormControl extends NileElement {\n // Form attributes\n name: string;\n value: unknown;\n disabled?: boolean;\n defaultValue?: unknown;\n defaultChecked?: boolean;\n form?: string;\n\n // Constraint validation attributes\n pattern?: string;\n min?: number \| string \| Date;\n max?: number \| string \| Date;\n step?: number \| 'any';\n required?: boolean;\n minlength?: number;\n maxlength?: number;\n\n // Form validation properties\n readonly validity: ValidityState;\n readonly validationMessage: string;\n\n // Form validation methods\n checkValidity: () => boolean;\n getForm: () => HTMLFormElement \| null;\n reportValidity: () => boolean;\n setCustomValidity: (message: string) => void;\n}\n\n"]}
1	+ {"version":3,"file":"nile-element.js","sourceRoot":"","sources":["../../../src/internal/nile-element.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement } from 'lit';\nimport { A11yState } from './accessibility/a11y.state.enum';\nimport { A11yProperty } from './accessibility/a11y.property.enum';\nimport { Role } from './accessibility/role.enum';\n\nexport default class NileElement extends LitElement {\n protected BUBBLES: boolean = true;\n protected COMPOSED: boolean = true;\n protected CANCELABLE: boolean = false;\n\n /** Emits a custom event with more convenient defaults. */\n emit(name: string, detail?: any, bubbles?: boolean , composed?: boolean, cancelable?: boolean) {\n const event = new CustomEvent(\n name, \n {\n bubbles: bubbles ?? this.BUBBLES,\n cancelable: cancelable ?? this.CANCELABLE,\n composed: composed ?? this.COMPOSED,\n detail\n }\n );\n\n this.dispatchEvent(event);\n return event;\n }\n}\n\n\nexport interface NileFormControl extends NileElement {\n // Form attributes\n name: string;\n value: unknown;\n disabled?: boolean;\n defaultValue?: unknown;\n defaultChecked?: boolean;\n form?: string;\n\n // Constraint validation attributes\n pattern?: string;\n min?: number \| string \| Date;\n max?: number \| string \| Date;\n step?: number \| 'any';\n required?: boolean;\n minlength?: number;\n maxlength?: number;\n\n // Form validation properties\n readonly validity: ValidityState;\n readonly validationMessage: string;\n\n // Form validation methods\n checkValidity: () => boolean;\n getForm: () => HTMLFormElement \| null;\n reportValidity: () => boolean;\n setCustomValidity: (message: string) => void;\n}\n\nexport interface A11yMetadataOptions {\n [Role.Role]?: string;\n\n [A11yState.AriaDisabled]?: boolean;\n [A11yState.AriaChecked]?: boolean;\n [A11yState.AriaSelected]?: boolean;\n [A11yState.AriaExpanded]?: boolean;\n [A11yState.AriaInvalid]?: boolean;\n [A11yState.AriaHidden]?: boolean;\n [A11yState.AriaPressed]?: boolean;\n [A11yState.AriaCurrent]?: string \| boolean;\n [A11yState.AriaBusy]?: boolean;\n [A11yState.AriaRequired]?: boolean;\n [A11yState.AriaReadonly]?: boolean;\n [A11yState.AriaValueNow]?: string;\n [A11yState.AriaValueMin]?: string;\n [A11yState.AriaValueMax]?: string;\n [A11yState.AriaSort]?: string;\n\n [A11yProperty.AriaLabel]?: string;\n [A11yProperty.AriaLabelledby]?: string;\n [A11yProperty.AriaDescribedby]?: string;\n [A11yProperty.AriaErrormessage]?: string;\n [A11yProperty.AriaDetails]?: string;\n [A11yProperty.AriaControls]?: string;\n [A11yProperty.AriaOwns]?: string;\n [A11yProperty.AriaFlowto]?: string;\n [A11yProperty.AriaRoledescription]?: string;\n [A11yProperty.AriaModal]?: string;\n [A11yProperty.AriaOrientation]?: string;\n [A11yProperty.AriaKeyshortcuts]?: string;\n [A11yProperty.AriaValuenow]?: string;\n [A11yProperty.AriaValuemin]?: string;\n [A11yProperty.AriaValuemax]?: string;\n [A11yProperty.AriaValuetext]?: string;\n [A11yProperty.AriaLevel]?: string;\n [A11yProperty.AriaPosinset]?: string;\n [A11yProperty.AriaSetsize]?: string;\n [A11yProperty.AriaColcount]?: string;\n [A11yProperty.AriaColindex]?: string;\n [A11yProperty.AriaColspan]?: string;\n [A11yProperty.AriaRowcount]?: string;\n [A11yProperty.AriaRowindex]?: string;\n [A11yProperty.AriaRowspan]?: string;\n [A11yProperty.AriaAutocomplete]?: string;\n [A11yProperty.AriaPlaceholder]?: string;\n [A11yProperty.AriaHasPopup]?: string;\n [A11yProperty.Tabindex]?: string;\n [A11yProperty.AriaMultiselectable]?: string;\n}\n\nexport function setupA11yMetadata(el: HTMLElement, options: A11yMetadataOptions = {}) {\n const role = options[Role.Role];\n if (role && !el.hasAttribute(Role.Role)) {\n el.setAttribute(Role.Role, role);\n }\n\n const missingLabel = !el.hasAttribute(A11yProperty.AriaLabelledby) && !el.hasAttribute(A11yProperty.AriaLabel);\n if (missingLabel) {\n const fallbackLabel = options[A11yProperty.AriaLabel] ?? options[A11yProperty.AriaLabelledby] ?? (options[A11yProperty.AriaLabelledby] ? (el as any).value : null);\n if (fallbackLabel?.trim()) {\n el.setAttribute(A11yProperty.AriaLabel, fallbackLabel.trim());\n }\n }\n\n const disabled = options[A11yState.AriaDisabled];\n if (disabled === true) {\n el.setAttribute(A11yState.AriaDisabled, 'true');\n } else if (disabled === false) {\n el.removeAttribute(A11yState.AriaDisabled);\n }\n\n for (const property of Object.values(A11yProperty)) {\n const value = (options as any)[property];\n if (value !== undefined && !el.hasAttribute(property)) {\n el.setAttribute(property, String(value));\n }\n }\n\n for (const state of Object.values(A11yState)) {\n if (state === A11yState.AriaDisabled) continue;\n const value = (options as any)[state];\n if (value === undefined) continue;\n el.setAttribute(state, String(value));\n }\n}\n\nfunction getLabelFromSlots(el: HTMLElement): string \| null {\n const slot = el.querySelector('[slot=\"label\"]');\n return slot?.textContent?.trim() \|\| null;\n}\n\nfunction getLabelFromText(el: HTMLElement): string \| null {\n const text = el.textContent?.trim();\n return text \|\| null;\n}"]}

package/dist/src/nile-avatar/nile-avatar.js CHANGED Viewed

@@ -117,6 +117,7 @@ let NileAvatar = 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};
@@ -141,6 +142,7 @@ let NileAvatar = class NileAvatar extends NileElement {
     <img
       src="${this.src}"
       class="avatar"
+      alt="${this.name || 'Avatar'}"
       class=${classMap({
             avatar: true,
             avatar__xs: this.size === 'xs',

package/dist/src/nile-avatar/nile-avatar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-avatar.js","sourceRoot":"","sources":["../../../src/nile-avatar/nile-avatar.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n nothing,\n} from 'lit';\nimport { customElement, state, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles } from './nile-avatar.css';\nimport NileElement from '../internal/nile-element';\n\n/\n Nile icon component.\n \n @tag nile-avatar\n \n /\n@customElement('nile-avatar')\nexport class NileAvatar extends NileElement {\n /*\n The styles for Avatar\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n /\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n /* Gives the url to the Avatar /\n @property({ type: String, reflect: true }) src = '';\n\n /* Gives the icon to the Avatar /\n @property({ type: String, reflect: true }) variant:'icon' \| 'image' \| 'text' = 'text';\n\n /* Gives the icon to the Avatar /\n @property({ type: String, reflect: true }) icon = 'var(--nile-icon-user, var(--ng-icon-user-01))';\n\n /* Gives the default Image Letters to the Avatar /\n @property({ type: String, reflect: true }) name: String = '';\n\n /* Gives the default bg color to the Avatar /\n @property({ type: String, reflect: true, attribute: 'bg-color' }) bgColor = '';\n\n /* Gives the default text color to the Avatar /\n @property({ type: String, reflect: true, attribute: 'text-color' }) textColor = '';\n\n /* Gives the default border color to the Avatar /\n @property({ type: String, reflect: true, attribute: 'border-color' }) borderColor = '';\n\n /* Size of the Avatar /\n @property({ reflect: true }) size: 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' = 'md';\n\n /* Gives a border radius of 50% to the Avatar /\n @property({ type: Boolean, reflect: true }) isRounded = true;\n\n @state() private imageError = false;\n\n / #endregion /\n\n / #region Methods /\n\n private generateInitials(): string {\n if (!this.name) {\n return '';\n }\n const nameParts = this.name\n .split(' ')\n .filter(part => part.length > 0)\n .map(part => part.charAt(0).toUpperCase())\n .slice(0, 2);\n return nameParts.length > 1 ? nameParts[0] + nameParts[1] : nameParts[0];\n }\n\n private generateVariantCode(initials: string): number {\n const char1 = initials.charCodeAt(0);\n const char2 = initials.length == 1 ? char1 : initials.charCodeAt(1);\n const multifactor = char1 char2 + (char1 % 23) + (char2 % 23);\n return multifactor % 5;\n }\n\n private getDefaultIconSize() {\n switch (this.size) {\n case 'xs':\n return '6';\n case 'sm':\n return '10';\n case 'md':\n return '16';\n case 'lg':\n return '20';\n case 'xl':\n return '24';\n case '2xl':\n return '28';\n default:\n return '16';\n }\n }\n\n public render(): TemplateResult {\n if('image'==this.variant && !this.imageError){\n return this.getImageContent()\n }\n else{\n const defaultInitials = this.generateInitials();\n if('text'==this.variant && defaultInitials){\n return this.getContentWrapped(html`${defaultInitials}`,defaultInitials);\n }\n else{\n return this.getContentWrapped(this.getIconContent(),defaultInitials)\n }\n }\n }\n\n getContentWrapped(content:TemplateResult,defaultInitials:string){\n const variant__code = this.generateVariantCode(defaultInitials);\n return html`\n <div\n class=${classMap({\n text__avatar: true,\n avatar__xs: this.size === 'xs',\n avatar__small: this.size === 'sm',\n avatar__medium: this.size === 'md',\n avatar__large: this.size === 'lg',\n avatar__extralarge: this.size === 'xl',\n avatar__2xl: this.size === '2xl',\n avatar__rounded: this.isRounded,\n variant__orange: variant__code === 0 && !this.bgColor,\n variant__pink: variant__code === 1 && !this.bgColor,\n variant__blue: variant__code === 2 && !this.bgColor,\n variant__light_blue: variant__code === 3 && !this.bgColor,\n variant__green: variant__code === 4 && !this.bgColor,\n })}\n part=\"avatar__content\"\n style=\"\n background-color: ${this.bgColor};\n color:${this.textColor?this.textColor:\"var(--nile-colors-white-base, var(--ng-colors-text-quaternary-500))\"};\n border: 1px solid ${this.borderColor ? this.borderColor : 'var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary))'};\n border-color:${defaultInitials ? `${this.borderColor ? this.borderColor : 'var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary))'}` : 'var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary))'}\"\n >\n ${content}\n </div>`\n }\n\n getIconContent(){\n return html`\n <nile-icon\n name=\"${this.icon}\"\n method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n color=\"${this.textColor?this.textColor:'var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500))'}\"\n size=\"${this.getDefaultIconSize()}\"\n ></nile-icon>`\n }\n\n getImageContent(){\n return html` \n <img\n src=\"${this.src}\"\n class=\"avatar\"\n class=${classMap({\n avatar: true,\n avatar__xs: this.size === 'xs',\n avatar__small: this.size === 'sm',\n avatar__medium: this.size === 'md',\n avatar__large: this.size === 'lg',\n avatar__extralarge: this.size === 'xl',\n avatar__2xl: this.size === '2xl',\n avatar__rounded: this.isRounded,\n })}\n part=\"avatar__image\"\n style=\"\tbackground-image: url(${this.src}), linear-gradient(lightgray, lightgray);\"\n @error=\"${()=>this.imageError=true}\"\n @load=\"${()=>this.imageError=false}\"\n />`\n }\n\n /* #endregion */\n}\n\nexport default NileAvatar;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-avatar': NileAvatar;\n }\n}\n"]}
1	+ {"version":3,"file":"nile-avatar.js","sourceRoot":"","sources":["../../../src/nile-avatar/nile-avatar.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n nothing,\n} from 'lit';\nimport { customElement, state, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles } from './nile-avatar.css';\nimport NileElement from '../internal/nile-element';\n\n/\n Nile icon component.\n \n @tag nile-avatar\n \n /\n@customElement('nile-avatar')\nexport class NileAvatar extends NileElement {\n /*\n The styles for Avatar\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n /\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n /* Gives the url to the Avatar /\n @property({ type: String, reflect: true }) src = '';\n\n /* Gives the icon to the Avatar /\n @property({ type: String, reflect: true }) variant:'icon' \| 'image' \| 'text' = 'text';\n\n /* Gives the icon to the Avatar /\n @property({ type: String, reflect: true }) icon = 'var(--nile-icon-user, var(--ng-icon-user-01))';\n\n /* Gives the default Image Letters to the Avatar /\n @property({ type: String, reflect: true }) name: String = '';\n\n /* Gives the default bg color to the Avatar /\n @property({ type: String, reflect: true, attribute: 'bg-color' }) bgColor = '';\n\n /* Gives the default text color to the Avatar /\n @property({ type: String, reflect: true, attribute: 'text-color' }) textColor = '';\n\n /* Gives the default border color to the Avatar /\n @property({ type: String, reflect: true, attribute: 'border-color' }) borderColor = '';\n\n /* Size of the Avatar /\n @property({ reflect: true }) size: 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' = 'md';\n\n /* Gives a border radius of 50% to the Avatar /\n @property({ type: Boolean, reflect: true }) isRounded = true;\n\n @state() private imageError = false;\n\n / #endregion /\n\n / #region Methods /\n\n private generateInitials(): string {\n if (!this.name) {\n return '';\n }\n const nameParts = this.name\n .split(' ')\n .filter(part => part.length > 0)\n .map(part => part.charAt(0).toUpperCase())\n .slice(0, 2);\n return nameParts.length > 1 ? nameParts[0] + nameParts[1] : nameParts[0];\n }\n\n private generateVariantCode(initials: string): number {\n const char1 = initials.charCodeAt(0);\n const char2 = initials.length == 1 ? char1 : initials.charCodeAt(1);\n const multifactor = char1 char2 + (char1 % 23) + (char2 % 23);\n return multifactor % 5;\n }\n\n private getDefaultIconSize() {\n switch (this.size) {\n case 'xs':\n return '6';\n case 'sm':\n return '10';\n case 'md':\n return '16';\n case 'lg':\n return '20';\n case 'xl':\n return '24';\n case '2xl':\n return '28';\n default:\n return '16';\n }\n }\n\n public render(): TemplateResult {\n if('image'==this.variant && !this.imageError){\n return this.getImageContent()\n }\n else{\n const defaultInitials = this.generateInitials();\n if('text'==this.variant && defaultInitials){\n return this.getContentWrapped(html`${defaultInitials}`,defaultInitials);\n }\n else{\n return this.getContentWrapped(this.getIconContent(),defaultInitials)\n }\n }\n }\n\n getContentWrapped(content:TemplateResult,defaultInitials:string){\n const variant__code = this.generateVariantCode(defaultInitials);\n return html`\n <div\n class=${classMap({\n text__avatar: true,\n avatar__xs: this.size === 'xs',\n avatar__small: this.size === 'sm',\n avatar__medium: this.size === 'md',\n avatar__large: this.size === 'lg',\n avatar__extralarge: this.size === 'xl',\n avatar__2xl: this.size === '2xl',\n avatar__rounded: this.isRounded,\n variant__orange: variant__code === 0 && !this.bgColor,\n variant__pink: variant__code === 1 && !this.bgColor,\n variant__blue: variant__code === 2 && !this.bgColor,\n variant__light_blue: variant__code === 3 && !this.bgColor,\n variant__green: variant__code === 4 && !this.bgColor,\n })}\n aria-hidden=\"true\"\n part=\"avatar__content\"\n style=\"\n background-color: ${this.bgColor};\n color:${this.textColor?this.textColor:\"var(--nile-colors-white-base, var(--ng-colors-text-quaternary-500))\"};\n border: 1px solid ${this.borderColor ? this.borderColor : 'var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary))'};\n border-color:${defaultInitials ? `${this.borderColor ? this.borderColor : 'var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary))'}` : 'var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary))'}\"\n >\n ${content}\n </div>`\n }\n\n getIconContent(){\n return html`\n <nile-icon\n name=\"${this.icon}\"\n method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n color=\"${this.textColor?this.textColor:'var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500))'}\"\n size=\"${this.getDefaultIconSize()}\"\n ></nile-icon>`\n }\n\n getImageContent(){\n return html` \n <img\n src=\"${this.src}\"\n class=\"avatar\"\n alt=\"${this.name \|\| 'Avatar'}\"\n class=${classMap({\n avatar: true,\n avatar__xs: this.size === 'xs',\n avatar__small: this.size === 'sm',\n avatar__medium: this.size === 'md',\n avatar__large: this.size === 'lg',\n avatar__extralarge: this.size === 'xl',\n avatar__2xl: this.size === '2xl',\n avatar__rounded: this.isRounded,\n })}\n part=\"avatar__image\"\n style=\"\tbackground-image: url(${this.src}), linear-gradient(lightgray, lightgray);\"\n @error=\"${()=>this.imageError=true}\"\n @load=\"${()=>this.imageError=false}\"\n />`\n }\n\n /* #endregion */\n}\n\nexport default NileAvatar;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-avatar': NileAvatar;\n }\n}\n"]}

package/dist/src/nile-badge/nile-badge.d.ts CHANGED Viewed

@@ -31,6 +31,7 @@ import type { CSSResultGroup } from 'lit';
  */
 export declare class NileBadge extends NileElement {
     static styles: CSSResultGroup;
+    connectedCallback(): void;
     /** The badge's theme variant. */
     variant: 'primary' | 'success' | 'normal' | 'warning' | 'error' | 'info' | 'gray' | 'brand' | 'blue-light' | 'blue' | 'indigo' | 'purple' | 'pink' | 'orange' | 'blue-gray' | 'gray-blue';
     /** Draws a pill-style badge with rounded edges. */

package/dist/src/nile-badge/nile-badge.js CHANGED Viewed

@@ -10,7 +10,11 @@ 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 { 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.
  *
@@ -42,6 +46,13 @@ let NileBadge = class NileBadge extends NileElement {
         //  For setting pill type
         this.pilltype = 'badge-color';
     }
+    connectedCallback() {
+        super.connectedCallback();
+        setupA11yMetadata(this, {
+            [Role.Role]: A11yRole.Text,
+            [A11yProperty.AriaLabel]: this.textContent?.trim() || A11yCustomValue.Badge,
+        });
+    }
     render() {
         return html `
       <span

package/dist/src/nile-badge/nile-badge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-badge.js","sourceRoot":"","sources":["../../../src/nile-badge/nile-badge.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,WAAW,MAAM,0BAA0B,CAAC;~~AAEnD~~;;;;;GAKG;AAEH;;;;;;;;;;;;;;GAcG;AAGI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,WAAW;IAAnC;;~~QAGL~~,iCAAiC;QACJ,YAAO,GAgBlB,QAAQ,CAAC;QAE3B,mDAAmD;QACP,YAAO,GAAG,KAAK,CAAC;QAE5D,yBAAyB;QACI,aAAQ,GAGnB,aAAa,CAAC;IAmClC,CAAC;~~IAjCC~~,MAAM;QACJ,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC;YACf,KAAK,EAAE,IAAI;YACX,gBAAgB,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC5C,eAAe,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YAC1C,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YACtC,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YACtC,eAAe,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YAC1C,eAAe,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YAC1C,eAAe,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YAC1C,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YACtC,mBAAmB,EAAE,IAAI,CAAC,OAAO,KAAK,YAAY;YAClD,kBAAkB,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;YAChD,gBAAgB,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC5C,gBAAgB,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC5C,cAAc,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;YACxC,cAAc,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;YACxC,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YACtC,qBAAqB,EAAE,IAAI,CAAC,QAAQ,IAAI,cAAc;YACtD,oBAAoB,EAAE,IAAI,CAAC,QAAQ,IAAI,aAAa;YACpD,gBAAgB,EACd,IAAI,CAAC,OAAO;gBACZ,IAAI,CAAC,QAAQ,IAAI,cAAc;gBAC/B,IAAI,CAAC,QAAQ,IAAI,YAAY;SAChC,CAAC;;;;KAIL,CAAC;IACJ,CAAC;;~~AA9DM~~,gBAAM,GAAmB,MAAM,AAAzB,CAA0B;~~AAGV~~;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAgBD;AAGiB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAiB;AAG/B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAGI;~~AA7BrB~~,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,~~CAgErB~~;;AAED,eAAe,SAAS,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n} from 'lit';\nimport { styles } from './nile-badge.css';\nimport '../nile-icon-button/nile-icon-button';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\n/\n Nile icon component.\n \n @tag nile-badge\n \n /\n\n/*\n @summary badges are used as labels to organize things or to indicate a selection.\n * @status stable\n \n @dependency nile-icon-button\n \n @slot - The badge's content.\n \n @event nile-remove - Emitted when the remove button is activated.\n \n @csspart base - The component's base wrapper.\n * @csspart content - The badge's content.\n * @csspart remove-button - The badge's remove button, an `<nile-icon-button>`.\n * @csspart remove-button__base - The remove button's exported `base` part.\n /\n\n@customElement('nile-badge')\nexport class NileBadge extends NileElement {\n static styles: CSSResultGroup = styles;\n\n /* The badge's theme variant. /\n @property({ reflect: true }) variant:\n \| 'primary'\n \| 'success'\n \| 'normal'\n \| 'warning'\n \| 'error'\n \| 'info'\n \| 'gray'\n \| 'brand'\n \| 'blue-light'\n \| 'blue'\n \| 'indigo'\n \| 'purple'\n \| 'pink'\n \| 'orange'\n \| 'blue-gray'\n \| 'gray-blue' = 'normal';\n\n /* Draws a pill-style badge with rounded edges. */\n @property({ type: Boolean, reflect: true }) rounded = false;\n\n // For setting pill type\n @property({ reflect: true }) pilltype:\n \| 'pill-color'\n \| 'pill-outline'\n \| 'badge-color'='badge-color';\n\n render() {\n return html`\n <span\n part=\"base\"\n class=${classMap({\n badge: true,\n 'badge--primary': this.variant === 'primary',\n 'badge--normal': this.variant === 'normal',\n 'badge--info': this.variant === 'info',\n 'badge--pink': this.variant === 'pink',\n 'badge--orange': this.variant === 'orange',\n 'badge--purple': this.variant === 'purple',\n 'badge--indigo': this.variant === 'indigo',\n 'badge--blue': this.variant === 'blue',\n 'badge--blue-light': this.variant === 'blue-light',\n 'badge--gray-blue': this.variant === 'gray-blue',\n 'badge--success': this.variant === 'success',\n 'badge--warning': this.variant === 'warning',\n 'badge--error': this.variant === 'error',\n 'badge--brand': this.variant === 'brand',\n 'badge--gray': this.variant === 'gray',\n 'badge--pill-outline': this.pilltype == 'pill-outline',\n 'badge--badge-color': this.pilltype == 'badge-color',\n 'badge--rounded':\n this.rounded \|\|\n this.pilltype == 'pill-outline' \|\|\n this.pilltype == 'pill-color',\n })}\n >\n <slot part=\"content\" class=\"badge__content\"></slot>\n </span>\n `;\n }\n}\n\nexport default NileBadge;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-badge': NileBadge;\n }\n}\n"]}
1	+ {"version":3,"file":"nile-badge.js","sourceRoot":"","sources":["../../../src/nile-badge/nile-badge.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n} from 'lit';\nimport { styles } from './nile-badge.css';\nimport '../nile-icon-button/nile-icon-button';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport NileElement, { setupA11yMetadata } from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\nimport { A11yProperty } from '../internal/accessibility/a11y.property.enum';\nimport { A11yRole } from '../internal/accessibility/a11y.role.enum';\nimport { Role } from '../internal/accessibility/role.enum';\nimport { A11yCustomValue } from '../internal/accessibility/a11y.custom-value.enum';\n/\n Nile icon component.\n \n @tag nile-badge\n \n /\n\n/*\n @summary badges are used as labels to organize things or to indicate a selection.\n * @status stable\n \n @dependency nile-icon-button\n \n @slot - The badge's content.\n \n @event nile-remove - Emitted when the remove button is activated.\n \n @csspart base - The component's base wrapper.\n * @csspart content - The badge's content.\n * @csspart remove-button - The badge's remove button, an `<nile-icon-button>`.\n * @csspart remove-button__base - The remove button's exported `base` part.\n /\n\n@customElement('nile-badge')\nexport class NileBadge extends NileElement {\n static styles: CSSResultGroup = styles;\n\n connectedCallback(): void {\n super.connectedCallback();\n setupA11yMetadata(this, {\n [Role.Role]: A11yRole.Text,\n [A11yProperty.AriaLabel]: this.textContent?.trim() \|\| A11yCustomValue.Badge,\n });\n }\n\n /* The badge's theme variant. /\n @property({ reflect: true }) variant:\n \| 'primary'\n \| 'success'\n \| 'normal'\n \| 'warning'\n \| 'error'\n \| 'info'\n \| 'gray'\n \| 'brand'\n \| 'blue-light'\n \| 'blue'\n \| 'indigo'\n \| 'purple'\n \| 'pink'\n \| 'orange'\n \| 'blue-gray'\n \| 'gray-blue' = 'normal';\n\n /* Draws a pill-style badge with rounded edges. */\n @property({ type: Boolean, reflect: true }) rounded = false;\n\n // For setting pill type\n @property({ reflect: true }) pilltype:\n \| 'pill-color'\n \| 'pill-outline'\n \| 'badge-color'='badge-color';\n\n render() {\n return html`\n <span\n part=\"base\"\n class=${classMap({\n badge: true,\n 'badge--primary': this.variant === 'primary',\n 'badge--normal': this.variant === 'normal',\n 'badge--info': this.variant === 'info',\n 'badge--pink': this.variant === 'pink',\n 'badge--orange': this.variant === 'orange',\n 'badge--purple': this.variant === 'purple',\n 'badge--indigo': this.variant === 'indigo',\n 'badge--blue': this.variant === 'blue',\n 'badge--blue-light': this.variant === 'blue-light',\n 'badge--gray-blue': this.variant === 'gray-blue',\n 'badge--success': this.variant === 'success',\n 'badge--warning': this.variant === 'warning',\n 'badge--error': this.variant === 'error',\n 'badge--brand': this.variant === 'brand',\n 'badge--gray': this.variant === 'gray',\n 'badge--pill-outline': this.pilltype == 'pill-outline',\n 'badge--badge-color': this.pilltype == 'badge-color',\n 'badge--rounded':\n this.rounded \|\|\n this.pilltype == 'pill-outline' \|\|\n this.pilltype == 'pill-color',\n })}\n >\n <slot part=\"content\" class=\"badge__content\"></slot>\n </span>\n `;\n }\n}\n\nexport default NileBadge;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-badge': NileBadge;\n }\n}\n"]}

package/dist/src/nile-checkbox/nile-checkbox.css.js CHANGED Viewed

@@ -205,6 +205,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/dist/src/nile-checkbox/nile-checkbox.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-checkbox.css.js","sourceRoot":"","sources":["../../../src/nile-checkbox/nile-checkbox.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0MxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { css } from 'lit';\n\n/\n Checkbox CSS\n /\nexport const styles = css`\n :host {\n display: inline-block;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host(.full-width) {\n width: 100%;\n }\n\n .checkbox {\n position: relative;\n display: inline-flex;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n vertical-align: middle;\n cursor: pointer;\n }\n\n .checkbox--medium {\n --toggle-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n }\n\n .checkbox__control {\n flex: 0 0 auto;\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--nile-type-scale-3, var(--ng-width-4));\n height: var(--nile-type-scale-3, var(--ng-height-16px));\n border: solid 1px\n var(\n --nile-checkbox-color-border-standard,\n var(--ng-colors-border-primary)\n );\n background-color: var(\n --nile-checkbox-color-background-standard,\n var(--ng-colors-bg-primary)\n );\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n transition: var(--nile-transition-duration-default border-color),\n var(--nile-transition-duration-default) background-color,\n var(--nile-transition-duration-default) color,\n var(--nile-transition-duration-default box-shadow);\n }\n\n .checkbox__input {\n position: absolute;\n opacity: 0;\n padding: 0;\n margin: 0;\n pointer-events: none;\n }\n\n / svg {\n display:none !important;\n } /\n\n / Hover /\n .checkbox:not(.checkbox--checked):not(.checkbox--disabled):not(\n .checkbox--indeterminate\n )\n .checkbox__control:hover {\n background: var(\n --nile-checkbox-color-background-hover,\n var(--ng-colors-bg-primary)\n );\n border: 1px solid\n var(--nile-checkbox-color-border-hover, var(--ng-colors-border-neutral));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n }\n\n / Disabled /\n .checkbox--disabled {\n cursor: not-allowed;\n }\n\n / Focus /\n .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n .checkbox__input:focus-visible\n ~ .checkbox__control {\n outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);\n outline-offset: 1px;\n }\n\n .checkbox--focused .checkbox__control {\n box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring));\n }\n\n / Checked/indeterminate /\n .checkbox--checked .checkbox__control,\n .checkbox--indeterminate .checkbox__control {\n border-color: var(\n --nile-checkbox-color-border-checked-standard,\n var(--ng-colors-bg-brand-solid)\n );\n background-color: var(\n --nile-checkbox-color-background-checked-standard,\n var(--ng-colors-bg-brand-solid)\n );\n }\n\n / Checked/indeterminate + hover /\n .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n .checkbox__control:hover {\n background: var(\n --nile-checkbox-color-background-checked-hover,\n var(--ng-colors-bg-brand-solid-hover)\n );\n border-color: var(\n --nile-checkbox-color-border-checked-standard,\n var(--ng-colors-bg-brand-solid-hover)\n );\n }\n\n / .checkbox.checkbox--indeterminate .checkbox_control:hover {\n border: none;\n } /\n\n / Checked/indeterminate + focus /\n \n\n .checkbox--disabled .checkbox__control {\n background-color: var(\n --nile-checkbox-color-border-checked-standard,\n var(--ng-colors-bg-disabled-subtle)\n );\n border-color: var(\n --nile-checkbox-color-border-standard,\n var(--ng-colors-border-disabled)\n );\n }\n \n.checkbox--disabled.checkbox--checked .checkbox__control,\n.checkbox--disabled.checkbox--indeterminate .checkbox__control {\n background-color: var(\n --nile-colors-dark-100,\n var(--ng-colors-bg-disabled-subtle)\n );\n border-color: var(\n --nile-colors-dark-100,\n var(--ng-colors-border-disabled)\n );\n}\n\n \n.checkbox--disabled:not(.checkbox--checked):not(.checkbox--indeterminate) .checkbox__control {\n background-color: var(--nile-colors-transparent, var(--ng-colors-bg-disabled-subtle));\n border-color: var(\n --nile-colors-dark-100,\n var(--ng-colors-border-disabled)\n );\n}\n\n .checkbox__label {\n display: inline-block;\n line-height: var(--nile-type-scale-3, var(--ng-line-height-text-sm));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n margin-inline-start: 0.5em;\n user-select: none;\n margin-top: var(--nile-spacing-xxs);\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-style: normal;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n letter-spacing: 0.2px;\n }\n\n :host([required]) .checkbox__label::after {\n content: '';\n margin-inline-start: -2px;\n }\n\n .checkbox__checked-icon {\n --nile-svg-stroke: white;\n --nile-svg-stroke-width: var(--nile-icon-stroke-width-1-3, var(--ng-icon-stroke-width-2-5));\n }\n\n .checkbox__indeterminate-icon {\n --nile-svg-stroke: white;\n --nile-svg-stroke-width: var(--nile-icon-stroke-width-1-3, var(--ng-icon-stroke-width-2-5));\n }\n\n .checkbox--disabled .checkbox__checked-icon,\n .checkbox--disabled .checkbox__indeterminate-icon {\n --nile-svg-stroke: var(\n --nile-colors-white-base,\n var(--ng-colors-fg-disabled-subtle)\n );\n --nile-svg-stroke-width: var(--nile-icon-stroke-width-1-3, var(--ng-icon-stroke-width-2-5));\n }\n\n .checkbox__helptext-icon {\n float: right;\n cursor: pointer;\n margin-right: var(--nile-spacing-lg);\n }\n`;\n\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-checkbox.css.js","sourceRoot":"","sources":["../../../src/nile-checkbox/nile-checkbox.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8MxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2023\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { css } from 'lit';\n\n/\n Checkbox CSS\n /\nexport const styles = css`\n :host {\n display: inline-block;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host(.full-width) {\n width: 100%;\n }\n\n .checkbox {\n position: relative;\n display: inline-flex;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n vertical-align: middle;\n cursor: pointer;\n }\n\n .checkbox--medium {\n --toggle-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n }\n\n .checkbox__control {\n flex: 0 0 auto;\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--nile-type-scale-3, var(--ng-width-4));\n height: var(--nile-type-scale-3, var(--ng-height-16px));\n border: solid 1px\n var(\n --nile-checkbox-color-border-standard,\n var(--ng-colors-border-primary)\n );\n background-color: var(\n --nile-checkbox-color-background-standard,\n var(--ng-colors-bg-primary)\n );\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n transition: var(--nile-transition-duration-default border-color),\n var(--nile-transition-duration-default) background-color,\n var(--nile-transition-duration-default) color,\n var(--nile-transition-duration-default box-shadow);\n }\n\n .checkbox__input {\n position: absolute;\n opacity: 0;\n padding: 0;\n margin: 0;\n pointer-events: none;\n }\n\n / svg {\n display:none !important;\n } /\n\n / Hover /\n .checkbox:not(.checkbox--checked):not(.checkbox--disabled):not(\n .checkbox--indeterminate\n )\n .checkbox__control:hover {\n background: var(\n --nile-checkbox-color-background-hover,\n var(--ng-colors-bg-primary)\n );\n border: 1px solid\n var(--nile-checkbox-color-border-hover, var(--ng-colors-border-neutral));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n }\n\n / Disabled /\n .checkbox--disabled {\n cursor: not-allowed;\n }\n\n / Focus /\n .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n .checkbox__input:focus-visible\n ~ .checkbox__control {\n outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);\n outline-offset: 1px;\n }\n\n .checkbox--focused .checkbox__control {\n box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring));\n }\n\n / Checked/indeterminate /\n .checkbox--checked .checkbox__control,\n .checkbox--indeterminate .checkbox__control {\n border-color: var(\n --nile-checkbox-color-border-checked-standard,\n var(--ng-colors-bg-brand-solid)\n );\n background-color: var(\n --nile-checkbox-color-background-checked-standard,\n var(--ng-colors-bg-brand-solid)\n );\n }\n\n / Checked/indeterminate + hover /\n .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n .checkbox__control:hover {\n background: var(\n --nile-checkbox-color-background-checked-hover,\n var(--ng-colors-bg-brand-solid-hover)\n );\n border-color: var(\n --nile-checkbox-color-border-checked-standard,\n var(--ng-colors-bg-brand-solid-hover)\n );\n }\n\n / .checkbox.checkbox--indeterminate .checkbox_control:hover {\n border: none;\n } /\n\n / Checked/indeterminate + focus /\n \n\n .checkbox--disabled .checkbox__control {\n background-color: var(\n --nile-checkbox-color-border-checked-standard,\n var(--ng-colors-bg-disabled-subtle)\n );\n border-color: var(\n --nile-checkbox-color-border-standard,\n var(--ng-colors-border-disabled)\n );\n }\n \n.checkbox--disabled.checkbox--checked .checkbox__control,\n.checkbox--disabled.checkbox--indeterminate .checkbox__control {\n background-color: var(\n --nile-colors-dark-100,\n var(--ng-colors-bg-disabled-subtle)\n );\n border-color: var(\n --nile-colors-dark-100,\n var(--ng-colors-border-disabled)\n );\n}\n\n \n.checkbox--disabled:not(.checkbox--checked):not(.checkbox--indeterminate) .checkbox__control {\n background-color: var(--nile-colors-transparent, var(--ng-colors-bg-disabled-subtle));\n border-color: var(\n --nile-colors-dark-100,\n var(--ng-colors-border-disabled)\n );\n}\n\n .checkbox__label {\n display: inline-block;\n line-height: var(--nile-type-scale-3, var(--ng-line-height-text-sm));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n margin-inline-start: 0.5em;\n user-select: none;\n margin-top: var(--nile-spacing-xxs);\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-style: normal;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n letter-spacing: 0.2px;\n }\n\n :host([required]) .checkbox__label::after {\n content: '';\n margin-inline-start: -2px;\n }\n\n .checkbox__checked-icon {\n --nile-svg-stroke: white;\n --nile-svg-stroke-width: var(--nile-icon-stroke-width-1-3, var(--ng-icon-stroke-width-2-5));\n }\n\n .checkbox__indeterminate-icon {\n --nile-svg-stroke: white;\n --nile-svg-stroke-width: var(--nile-icon-stroke-width-1-3, var(--ng-icon-stroke-width-2-5));\n }\n\n .checkbox--disabled .checkbox__checked-icon,\n .checkbox--disabled .checkbox__indeterminate-icon {\n --nile-svg-stroke: var(\n --nile-colors-white-base,\n var(--ng-colors-fg-disabled-subtle)\n );\n --nile-svg-stroke-width: var(--nile-icon-stroke-width-1-3, var(--ng-icon-stroke-width-2-5));\n }\n\n .checkbox--disabled .checkbox__label {\n color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));\n }\n\n .checkbox__helptext-icon {\n float: right;\n cursor: pointer;\n margin-right: var(--nile-spacing-lg);\n }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-checkbox/nile-checkbox.d.ts CHANGED Viewed

@@ -68,6 +68,8 @@ export declare class NileCheckbox extends NileElement {
      * the same document or shadow root for this to work.
      */
     form: string;
+    /** Associates this checkbox with a nile-checkbox-group via a shared group name. */
+    group: string;
     /** Makes the checkbox a required field. */
     required: boolean;
     private toggleHelpText;