@oracle/oraclejet-core-pack 17.1.3 → 18.0.0

package/oj-c/Table.json

@@ -6,7 +6,7 @@
     "memberof": "oj-c",
     "longname": "oj-c.Table",
     "kind": "class",
-    "classdesc": "<h3 id=\"tableOverview-section\">\n  JET Table Component\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#tableOverview-section\"></a>\n</h3>\n\n<p>Description: The Table component presents data in a tabular format with highly interactive features.\n\n<h3 id=\"data-section\">\n  Data\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#data-section\"></a>\n</h3>\n<p>The JET Table gets its data from a DataProvider.</p>\n\n<p>Example of data provider content</p>\n<pre class=\"prettyprint\"><code>&lt;oj-c-table data=\"[[dataProvider]]\">&lt;/oj-c-table></code></pre>\n\n\n<h3 id=\"coming-features-section\">\n  Coming Features\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#coming-features-section\"></a>\n</h3>\n\n<p>These features will be available in forthcoming versions</p>\n<ul>\n    <li>Sorting</li>\n    <li>Column Resizing</li>\n    <li>Drag and Drop</li>\n    <li>Editing</li>\n    <li>Add Row</li>\n    <li>Page Scrolling</li>\n    <li>First Selected Row</li>\n    <li>Sticky Columns</li>\n    <li>Edge To Edge Padding</li>\n    <li>Tree Data</li>\n    <li>Context menu</li>\n    <li>Per Row Selectable</li>\n    <li>Group By Table</li>\n</ul>\n\n<h3 id=\"keyboard-section\">\n  Keyboard End User Information\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#keyboard-section\"></a>\n</h3>\n\n<table class=\"keyboard-table\">\n  <thead>\n    <tr>\n      <th>Target</th>\n      <th>Key</th>\n      <th>Action</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td rowspan=\"16\" style=\"vertical-align:top;\">Data Cell</td>\n      <td>Tab</td>\n      <td>Move browser focus to next tab stop on the page.</td>\n    </tr>\n    <tr>\n      <td>Shift + Tab</td>\n      <td>Move browser focus to previous tab stop on the page.</td>\n    </tr>\n    <tr>\n      <td>F2</td>\n      <td>If there is focusable content in the current cell, move browser focus to the first focusable element in the current cell. No action otherwise.</td>\n    </tr>\n    <tr>\n      <td>Esc</td>\n      <td>No action.</td>\n    </tr>\n    <tr>\n      <td>Up Arrow</td>\n      <td>Focus the cell above the current cell.</td>\n    </tr>\n    <tr>\n      <td>Down Arrow</td>\n      <td>Focus the cell below the current cell.</td>\n    </tr>\n    <tr>\n      <td>Left Arrow</td>\n      <td>Focus the cell to the left of the current cell.</td>\n    </tr>\n    <tr>\n      <td>Right Arrow</td>\n      <td>Focus the cell to the right of the current cell.</td>\n    </tr>\n    <tr>\n      <td>Shift + Up Arrow</td>\n      <td>If multiple row selection is enabled, begin or extend a range selection to include the next row in the given direction without changing the currently focused cell. No action otherwise.</td>\n    </tr>\n    <tr>\n      <td>Shift + Down Arrow</td>\n      <td>If multiple row selection is enabled, begin or extend a range selection to include the next row in the given direction without changing the currently focused cell. No action otherwise.</td>\n    </tr>\n    <tr>\n      <td>Space</td>\n      <td>If row selection is enabled, toggle the selection state of the current row. Additionally, if row actions are enabled, trigger an ojRowAction event. No action otherwise.</td>\n    </tr>\n    <tr>\n      <td>Enter</td>\n      <td>If there is focusable content in the current cell, move browser focus to the first focusable element in the current cell. Additionally, if row actions are enabled, trigger an ojRowAction event. No action otherwise.</td>\n    </tr>\n    <tr>\n      <td>Home</td>\n      <td>Focus the first cell in the current row.</td>\n    </tr>\n    <tr>\n      <td>End</td>\n      <td>Focus the last cell in the current row.</td>\n    </tr>\n    <tr>\n      <td>Ctrl/Cmd + Home</td>\n      <td>Focus the first cell in the first row.</td>\n    </tr>\n    <tr>\n      <td>Ctrl/Cmd + End</td>\n      <td>Focus the last cell in the last available row.</td>\n    </tr>\n\n    <tr>\n      <td rowspan=\"16\" style=\"vertical-align:top;\">Header Cell</td>\n      <td>Tab</td>\n      <td>Move browser focus to next tab stop on the page.</td>\n    </tr>\n    <tr>\n      <td>Shift + Tab</td>\n      <td>Move browser focus to previous tab stop on the page.</td>\n    </tr>\n    <tr>\n      <td>F2</td>\n      <td>If there is focusable content in the current header cell, move browser focus to the first focusable element in the current header cell. No action otherwise.</td>\n    </tr>\n    <tr>\n      <td>Esc</td>\n     <td>No action.</td>\n    </tr>\n    <tr>\n      <td>Up Arrow</td>\n      <td>No action.</td>\n    </tr>\n    <tr>\n      <td>Down Arrow</td>\n      <td>Focus the cell below the current cell.</td>\n    </tr>\n    <tr>\n      <td>Left Arrow</td>\n      <td>Focus the header cell to the left of the current cell.</td>\n    </tr>\n    <tr>\n      <td>Right Arrow</td>\n      <td>Focus the header cell to the right of the current cell.</td>\n    </tr>\n    <tr>\n      <td>Shift + Left Arrow</td>\n      <td>If multiple column selection is enabled, begin or extend a range selection to include the next column in the given direction without changing the currently focused header cell. No action otherwise.</td>\n    </tr>\n    <tr>\n      <td>Shift + Right Arrow</td>\n      <td>If multiple column selection is enabled, begin or extend a range selection to include the next column in the given direction without changing the currently focused header cell. No action otherwise.</td>\n    </tr>\n    <tr>\n      <td>Space</td>\n      <td>If column selection is enabled and the current column is selectable, toggle the selection state of the current column. No action otherwise.</td>\n    </tr>\n    <tr>\n      <td>Enter</td>\n      <td>If there is focusable content in the current header cell, move browser focus to the first focusable element in the current header cell. No action otherwise.</td>\n    </tr>\n    <tr>\n      <td>Home</td>\n      <td>Focus the first header cell.</td>\n    </tr>\n    <tr>\n      <td>End</td>\n      <td>Focus the last header cell.</td>\n    </tr>\n    <tr>\n      <td>Ctrl/Cmd + Home</td>\n      <td>Focus the first cell in the first row.</td>\n    </tr>\n    <tr>\n      <td>Ctrl/Cmd + End</td>\n      <td>Focus the last cell in the last available row.</td>\n    </tr>\n\n\n    <tr>\n      <td rowspan=\"16\" style=\"vertical-align:top;\">Footer Cell</td>\n      <td>Tab</td>\n      <td>Move browser focus to next tab stop on the page.</td>\n    </tr>\n    <tr>\n      <td>Shift + Tab</td>\n      <td>Move browser focus to previous tab stop on the page.</td>\n    </tr>\n    <tr>\n      <td>F2</td>\n      <td>If there is focusable content in the current footer cell, move browser focus to the first focusable element in the current footer cell. No action otherwise.</td>\n    </tr>\n    <tr>\n      <td>Esc</td>\n      <td>No action.</td>\n    </tr>\n    <tr>\n      <td>Up Arrow</td>\n      <td>Focus the cell above the current cell.</td>\n    </tr>\n    <tr>\n      <td>Down Arrow</td>\n      <td>No action.</td>\n    </tr>\n    <tr>\n      <td>Left Arrow</td>\n      <td>Focus the footer cell to the left of the current cell.</td>\n    </tr>\n    <tr>\n      <td>Right Arrow</td>\n      <td>Focus the footer cell to the right of the current cell.</td>\n    </tr>\n    <tr>\n      <td>Shift + Left Arrow</td>\n      <td>If multiple column selection is enabled, begin or extend a range selection to include the next column in the given direction without changing the currently focused footer cell. No action otherwise.</td>\n    </tr>\n    <tr>\n      <td>Shift + Right Arrow</td>\n      <td>If multiple column selection is enabled, begin or extend a range selection to include the next column in the given direction without changing the currently focused footer cell. No action otherwise.</td>\n    </tr>\n    <tr>\n      <td>Space</td>\n      <td>If column selection is enabled and the current column is selectable, toggle the selection state of the current column. No action otherwise.</td>\n    </tr>\n   <tr>\n      <td>Enter</td>\n      <td>If there is focusable content in the current footer cell, move browser focus to the first focusable element in the current footer cell. No action otherwise.</td>\n    </tr>\n    <tr>\n      <td>Home</td>\n      <td>Focus the first footer cell.</td>\n    </tr>\n    <tr>\n      <td>End</td>\n      <td>Focus the last footer cell.</td>\n    </tr>\n    <tr>\n      <td>Ctrl/Cmd + Home</td>\n      <td>Focus the first cell in the first row.</td>\n    </tr>\n    <tr>\n      <td>Ctrl/Cmd + End</td>\n      <td>Focus the last cell in the last available row.</td>\n    </tr>\n\n\n    <tr>\n      <td rowspan=\"10\" style=\"vertical-align:top;\">No Data Cell</td>\n      <td>Tab</td>\n      <td>Move browser focus to next tab stop on the page.</td>\n    </tr>\n    <tr>\n      <td>Shift + Tab</td>\n      <td>Move browser focus to previous tab stop on the page.</td>\n    </tr>\n    <tr>\n      <td>F2</td>\n      <td>If there is focusable content in the no data cell, move browser focus to the first focusable element in the no data cell. No action otherwise.</td>\n    </tr>\n    <tr>\n      <td>Esc</td>\n      <td>No action.</td>\n    </tr>\n    <tr>\n      <td>Up Arrow</td>\n      <td>Focus the first header cell.</td>\n    </tr>\n    <tr>\n      <td>Down Arrow</td>\n      <td>If footer cells are rendered, focus the first footer cell. No action otherwise.</td>\n    </tr>\n    <tr>\n      <td>Left Arrow</td>\n      <td>No action.</td>\n    </tr>\n    <tr>\n      <td>Right Arrow</td>\n      <td>No action.</td>\n    </tr>\n    <tr>\n      <td>Space</td>\n      <td>No action.</td>\n    </tr>\n    <tr>\n      <td>Enter</td>\n      <td>If there is focusable content in the no data cell, move browser focus to the first focusable element in the no data cell. No action otherwise.</td>\n    </tr>\n\n\n    <tr>\n      <td rowspan=\"18\" style=\"vertical-align:top;\">Focused Cell Content</td>\n      <td>Tab</td>\n      <td>Move browser focus to the next focusable element in the table. If that element is already focused, move browser focus to the first focusable element in the table.</td>\n    </tr>\n    <tr>\n      <td>Shift + Tab</td>\n      <td>Move browser focus to the previous focusable element in the table. If that element is already focused, move browser focus to the last focusable element in the table.</td>\n    </tr>\n    <tr>\n      <td>F2</td>\n      <td>Restore focus to the current cell.</td>\n    </tr>\n    <tr>\n      <td>Esc</td>\n      <td>Restore focus to the current cell.</td>\n    </tr>\n    <tr>\n      <td>Space</td>\n      <td>No action.</td>\n    </tr>\n    <tr>\n      <td>Enter</td>\n      <td>No action.</td>\n    </tr>\n\n  </tbody>\n</table>\n\n<h3 id=\"touch-section\">\n  Touch End User Information\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#touch-section\"></a>\n</h3>\n\n<table class=\"keyboard-table\">\n  <thead>\n    <tr>\n      <th>Target</th>\n      <th>Gesture</th>\n      <th>Action</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td rowspan=\"1\" style=\"vertical-align:top;\">\n        Data Cell\n      </td>\n      <td>Tap</td>\n      <td>Focus the data cell. Additionally, if row selection is enabled and the current row is selectable, toggle the selection state of the current row. Additionally, if row actions are enabled, trigger an ojRowAction event.</td>\n    </tr>\n    <tr>\n      <td rowspan=\"1\" style=\"vertical-align:top;\">\n        Header Cell\n      </td>\n      <td>Tap</td>\n      <td>Focus the header cell. Additionally, if column selection is enabled and the current column is selectable, toggle the selection state of the current column.</td>\n    </tr>\n    <tr>\n      <td rowspan=\"1\" style=\"vertical-align:top;\">\n        Footer Cell\n      </td>\n      <td>Tap</td>\n      <td>Focus the footer cell. Additionally, if column selection is enabled and the current column is selectable, toggle the selection state of the current column.</td>\n    </tr>\n    <tr>\n      <td rowspan=\"1\" style=\"vertical-align:top;\">\n        No Data Cell\n      </td>\n      <td>Tap</td>\n      <td>Focus the no data cell.</td>\n    </tr>\n  </tbody>\n</table>\n\n\n<h3 id=\"a11y-section\">\n  Accessibility\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#a11y-section\"></a>\n</h3>\n\n<p>The Table implements the grid role for accessibility. This enables the Table to be compatible with the special 'table\nreading' commands that most assistive technologies provide in addition to the standard keyboard interactions described\nin the Keyboard End User Information section above.</p>\n\n<p>An application is required to include contextual information to make the Table accessible for assistive technologies\nby providing one or more the following properties as appropriate:</p>\n\n<ul>\n  <li>aria-labelledby</li>\n  <li>aria-label</li>\n</ul>\n\n<p>Additionally, an application should specify at least 1 accessible row header per row by providing a value for the\n<code>row.accessible-row-header</code> attribute. The information in the cell(s) specified will be used by assistive technologies\nto convey basic contextual information for the focused row. For example, if a user is arrowing up or down in an 'Amount Due'\ncolumn, having something like '$500' read out does not provide any helpful information as to who or what that amount corresponds\nto. If an 'Account Holder' column is specified as an accessible row header, then something like 'Larry Ellison, $500' would be read\nout instead. Providing this additional row context is essential for creating accessible tables.</p>\n\n<h4>Managing Tab Stops</h4>\n<p>The Table does not manipulate the <code>tabindex</code> attribute of cell contents. For oj-c components specified\nas children of the Table, <code>tabindex</code> management will happen automatically. Otherwise, applications must\nspecifically set the <code>tabindex</code> of tabbable child elements based on the <code>isTabbable</code> property\nof the template context.</p>\n<p>However, there may be cases where applications do not have access to the tabbable elements themselves. For\nexample, a third-party component that does not support JET's new <code>tabindex</code> management. In that case,\napplications can specify the <code>data-oj-manage-tabs</code> attribute on any tabbable elements (or any one of\ntheir ancestors) to ensure the Table remains a single tab stop for accessibility purposes.</p>\n\n<h4>Custom Colors</h4>\n<p>Using colors, including background and text colors, is not accessible if it is the only way information is conveyed.\nLow vision users may not be able to see the different colors, and in high contrast mode the colors are removed.\nThe Redwood approved way to show status is to use a badge.</p>\n\n\n<h3 id=\"data-attributes-section\">\n  Custom Data Attributes\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#data-attributes-section\"></a>\n</h3>\n\n<p>Table supports the following custom data attributes.\n<table class=\"keyboard-table\">\n  <thead>\n    <tr>\n      <th>Name</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><kbd>data-oj-as</kbd></td>\n      <td><p>Provides an alias for a specific template instance and has the same subproperties as the $current variable.</p>\n        <pre class=\"prettyprint\"><code>&lt;oj-c-table id=\"table\">\n  &lt;template slot=\"cellTemplate\" data-oj-as=\"cell\">\n  &lt;/template>\n&lt;/oj-c-table></code></pre>\n      </td>\n    </tr>\n    <tr>\n      <td><kbd>data-oj-clickthrough</kbd></td>\n      <td><p>Specify on any element inside a cell where you want to control whether the Table should perform actions triggered\n        by a click event originating from the element or one of its descendants.</p>\n        <p>For example, if you specify this attribute with a value of \"disabled\" on a button inside a cell, the Table\n        will not select the row or trigger an action event when a user clicks on the button.</p>\n        <pre class=\"prettyprint\"><code>&lt;oj-c-table id=\"table\">\n  &lt;template slot=\"cellTemplate\">\n    &lt;oj-c-button data-oj-clickthrough=\"disabled\">&lt;/oj-c-button>\n  &lt;/template>\n&lt;/oj-c-table></code></pre>\n      </td>\n    </tr>\n    <tr>\n      <td><kbd>data-oj-manage-tabs</kbd></td>\n      <td><p>The Table does not manipulate the <code>tabindex</code> attribute of cell contents. For oj-c elements\n        specified as children of the Table, <code>tabindex</code> management will happen automatically. Otherwise,\n        applications must specifically set the <code>tabindex</code> of tabbable child elements based on the\n        <code>isTabbable</code> property of the template context.</p>\n        <p>However, there may be cases where applications do not have access to the tabbable elements themselves. For\n        example, a third-party component that does not support JET's new <code>tabindex</code> management. In that case,\n        applications can specify the <code>data-oj-manage-tabs</code> attribute on any tabbable elements (or any one\n        of their ancestors) to ensure the Table remains a single tab stop for accessibility purposes.</p>\n        <pre class=\"prettyprint\"><code>&lt;oj-c-table>\n  &lt;template slot=\"cellTemplate1\" data-oj-as=\"cell\">\n    &lt;a href=\"#\" :tabindex=\"[[cell.isTabbable ? 0 : -1]]\">Link&lt;/a>\n  &lt;/template>\n  &lt;template slot=\"cellTemplate2\" data-oj-as=\"cell\">\n    &lt;some-tabbable-component data-oj-manage-tabs>&lt;/some-tabbable-component>\n  &lt;/template>\n&lt;/oj-c-table></code></pre>\n      </td>\n    </tr>\n  </tbody>\n</table>",
+    "classdesc": "<h3 id=\"tableOverview-section\">\n  JET Table Component\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#tableOverview-section\"></a>\n</h3>\n\n<p>Description: The Table component presents data in a tabular format with highly interactive features.\n\n<h3 id=\"data-section\">\n  Data\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#data-section\"></a>\n</h3>\n<p>The JET Table gets its data from a DataProvider.</p>\n\n<p>Example of data provider content</p>\n<pre class=\"prettyprint\"><code>&lt;oj-c-table data=\"[[dataProvider]]\">&lt;/oj-c-table></code></pre>\n\n\n<h3 id=\"coming-features-section\">\n  Coming Features\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#coming-features-section\"></a>\n</h3>\n\n<p>These features will be available in forthcoming versions</p>\n<ul>\n    <li>Sorting</li>\n    <li>Column Resizing</li>\n    <li>Drag and Drop</li>\n    <li>Editing</li>\n    <li>Add Row</li>\n    <li>Page Scrolling</li>\n    <li>First Selected Row</li>\n    <li>Sticky Columns</li>\n    <li>Edge To Edge Padding</li>\n    <li>Tree Data</li>\n    <li>Context menu</li>\n    <li>Per Row Selectable</li>\n    <li>Group By Table</li>\n</ul>\n\n<h3 id=\"keyboard-section\">\n  Keyboard End User Information\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#keyboard-section\"></a>\n</h3>\n\n<table class=\"keyboard-table\">\n  <thead>\n    <tr>\n      <th>Target</th>\n      <th>Key</th>\n      <th>Action</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td rowspan=\"16\" style=\"vertical-align:top;\">Data Cell</td>\n      <td>Tab</td>\n      <td>Move browser focus to next tab stop on the page.</td>\n    </tr>\n    <tr>\n      <td>Shift + Tab</td>\n      <td>Move browser focus to previous tab stop on the page.</td>\n    </tr>\n    <tr>\n      <td>F2</td>\n      <td>If there is focusable content in the current cell, move browser focus to the first focusable element in the current cell. No action otherwise.</td>\n    </tr>\n    <tr>\n      <td>Esc</td>\n      <td>No action.</td>\n    </tr>\n    <tr>\n      <td>Up Arrow</td>\n      <td>Focus the cell above the current cell.</td>\n    </tr>\n    <tr>\n      <td>Down Arrow</td>\n      <td>Focus the cell below the current cell.</td>\n    </tr>\n    <tr>\n      <td>Left Arrow</td>\n      <td>Focus the cell to the left of the current cell.</td>\n    </tr>\n    <tr>\n      <td>Right Arrow</td>\n      <td>Focus the cell to the right of the current cell.</td>\n    </tr>\n    <tr>\n      <td>Shift + Up Arrow</td>\n      <td>If multiple row selection is enabled, begin or extend a range selection to include the next row in the given direction without changing the currently focused cell. No action otherwise.</td>\n    </tr>\n    <tr>\n      <td>Shift + Down Arrow</td>\n      <td>If multiple row selection is enabled, begin or extend a range selection to include the next row in the given direction without changing the currently focused cell. No action otherwise.</td>\n    </tr>\n    <tr>\n      <td>Space</td>\n      <td>If row selection is enabled, toggle the selection state of the current row. Additionally, if row actions are enabled, trigger an ojRowAction event. No action otherwise.</td>\n    </tr>\n    <tr>\n      <td>Enter</td>\n      <td>If there is focusable content in the current cell, move browser focus to the first focusable element in the current cell. Additionally, if row actions are enabled, trigger an ojRowAction event. No action otherwise.</td>\n    </tr>\n    <tr>\n      <td>Home</td>\n      <td>Focus the first cell in the current row.</td>\n    </tr>\n    <tr>\n      <td>End</td>\n      <td>Focus the last cell in the current row.</td>\n    </tr>\n    <tr>\n      <td>Ctrl/Cmd + Home</td>\n      <td>Focus the first cell in the first row.</td>\n    </tr>\n    <tr>\n      <td>Ctrl/Cmd + End</td>\n      <td>Focus the last cell in the last available row.</td>\n    </tr>\n\n    <tr>\n      <td rowspan=\"16\" style=\"vertical-align:top;\">Header Cell</td>\n      <td>Tab</td>\n      <td>Move browser focus to next tab stop on the page.</td>\n    </tr>\n    <tr>\n      <td>Shift + Tab</td>\n      <td>Move browser focus to previous tab stop on the page.</td>\n    </tr>\n    <tr>\n      <td>F2</td>\n      <td>If there is focusable content in the current header cell, move browser focus to the first focusable element in the current header cell. No action otherwise.</td>\n    </tr>\n    <tr>\n      <td>Esc</td>\n     <td>No action.</td>\n    </tr>\n    <tr>\n      <td>Up Arrow</td>\n      <td>No action.</td>\n    </tr>\n    <tr>\n      <td>Down Arrow</td>\n      <td>Focus the cell below the current cell.</td>\n    </tr>\n    <tr>\n      <td>Left Arrow</td>\n      <td>Focus the header cell to the left of the current cell.</td>\n    </tr>\n    <tr>\n      <td>Right Arrow</td>\n      <td>Focus the header cell to the right of the current cell.</td>\n    </tr>\n    <tr>\n      <td>Shift + Left Arrow</td>\n      <td>If multiple column selection is enabled, begin or extend a range selection to include the next column in the given direction without changing the currently focused header cell. No action otherwise.</td>\n    </tr>\n    <tr>\n      <td>Shift + Right Arrow</td>\n      <td>If multiple column selection is enabled, begin or extend a range selection to include the next column in the given direction without changing the currently focused header cell. No action otherwise.</td>\n    </tr>\n    <tr>\n      <td>Space</td>\n      <td>If column selection is enabled and the current column is selectable, toggle the selection state of the current column. No action otherwise.</td>\n    </tr>\n    <tr>\n      <td>Enter</td>\n      <td>If there is focusable content in the current header cell, move browser focus to the first focusable element in the current header cell. No action otherwise.</td>\n    </tr>\n    <tr>\n      <td>Home</td>\n      <td>Focus the first header cell.</td>\n    </tr>\n    <tr>\n      <td>End</td>\n      <td>Focus the last header cell.</td>\n    </tr>\n    <tr>\n      <td>Ctrl/Cmd + Home</td>\n      <td>Focus the first cell in the first row.</td>\n    </tr>\n    <tr>\n      <td>Ctrl/Cmd + End</td>\n      <td>Focus the last cell in the last available row.</td>\n    </tr>\n\n\n    <tr>\n      <td rowspan=\"16\" style=\"vertical-align:top;\">Footer Cell</td>\n      <td>Tab</td>\n      <td>Move browser focus to next tab stop on the page.</td>\n    </tr>\n    <tr>\n      <td>Shift + Tab</td>\n      <td>Move browser focus to previous tab stop on the page.</td>\n    </tr>\n    <tr>\n      <td>F2</td>\n      <td>If there is focusable content in the current footer cell, move browser focus to the first focusable element in the current footer cell. No action otherwise.</td>\n    </tr>\n    <tr>\n      <td>Esc</td>\n      <td>No action.</td>\n    </tr>\n    <tr>\n      <td>Up Arrow</td>\n      <td>Focus the cell above the current cell.</td>\n    </tr>\n    <tr>\n      <td>Down Arrow</td>\n      <td>No action.</td>\n    </tr>\n    <tr>\n      <td>Left Arrow</td>\n      <td>Focus the footer cell to the left of the current cell.</td>\n    </tr>\n    <tr>\n      <td>Right Arrow</td>\n      <td>Focus the footer cell to the right of the current cell.</td>\n    </tr>\n    <tr>\n      <td>Shift + Left Arrow</td>\n      <td>If multiple column selection is enabled, begin or extend a range selection to include the next column in the given direction without changing the currently focused footer cell. No action otherwise.</td>\n    </tr>\n    <tr>\n      <td>Shift + Right Arrow</td>\n      <td>If multiple column selection is enabled, begin or extend a range selection to include the next column in the given direction without changing the currently focused footer cell. No action otherwise.</td>\n    </tr>\n    <tr>\n      <td>Space</td>\n      <td>If column selection is enabled and the current column is selectable, toggle the selection state of the current column. No action otherwise.</td>\n    </tr>\n   <tr>\n      <td>Enter</td>\n      <td>If there is focusable content in the current footer cell, move browser focus to the first focusable element in the current footer cell. No action otherwise.</td>\n    </tr>\n    <tr>\n      <td>Home</td>\n      <td>Focus the first footer cell.</td>\n    </tr>\n    <tr>\n      <td>End</td>\n      <td>Focus the last footer cell.</td>\n    </tr>\n    <tr>\n      <td>Ctrl/Cmd + Home</td>\n      <td>Focus the first cell in the first row.</td>\n    </tr>\n    <tr>\n      <td>Ctrl/Cmd + End</td>\n      <td>Focus the last cell in the last available row.</td>\n    </tr>\n\n\n    <tr>\n      <td rowspan=\"10\" style=\"vertical-align:top;\">No Data Cell</td>\n      <td>Tab</td>\n      <td>Move browser focus to next tab stop on the page.</td>\n    </tr>\n    <tr>\n      <td>Shift + Tab</td>\n      <td>Move browser focus to previous tab stop on the page.</td>\n    </tr>\n    <tr>\n      <td>F2</td>\n      <td>If there is focusable content in the no data cell, move browser focus to the first focusable element in the no data cell. No action otherwise.</td>\n    </tr>\n    <tr>\n      <td>Esc</td>\n      <td>No action.</td>\n    </tr>\n    <tr>\n      <td>Up Arrow</td>\n      <td>Focus the first header cell.</td>\n    </tr>\n    <tr>\n      <td>Down Arrow</td>\n      <td>If footer cells are rendered, focus the first footer cell. No action otherwise.</td>\n    </tr>\n    <tr>\n      <td>Left Arrow</td>\n      <td>No action.</td>\n    </tr>\n    <tr>\n      <td>Right Arrow</td>\n      <td>No action.</td>\n    </tr>\n    <tr>\n      <td>Space</td>\n      <td>No action.</td>\n    </tr>\n    <tr>\n      <td>Enter</td>\n      <td>If there is focusable content in the no data cell, move browser focus to the first focusable element in the no data cell. No action otherwise.</td>\n    </tr>\n\n\n    <tr>\n      <td rowspan=\"18\" style=\"vertical-align:top;\">Focused Cell Content</td>\n      <td>Tab</td>\n      <td>Move browser focus to the next focusable element in the table. If that element is already focused, move browser focus to the first focusable element in the table.</td>\n    </tr>\n    <tr>\n      <td>Shift + Tab</td>\n      <td>Move browser focus to the previous focusable element in the table. If that element is already focused, move browser focus to the last focusable element in the table.</td>\n    </tr>\n    <tr>\n      <td>F2</td>\n      <td>Restore focus to the current cell.</td>\n    </tr>\n    <tr>\n      <td>Esc</td>\n      <td>Restore focus to the current cell.</td>\n    </tr>\n    <tr>\n      <td>Space</td>\n      <td>No action.</td>\n    </tr>\n    <tr>\n      <td>Enter</td>\n      <td>No action.</td>\n    </tr>\n\n  </tbody>\n</table>\n\n<h3 id=\"touch-section\">\n  Touch End User Information\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#touch-section\"></a>\n</h3>\n\n<table class=\"keyboard-table\">\n  <thead>\n    <tr>\n      <th>Target</th>\n      <th>Gesture</th>\n      <th>Action</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td rowspan=\"1\" style=\"vertical-align:top;\">\n        Data Cell\n      </td>\n      <td>Tap</td>\n      <td>Focus the data cell. Additionally, if row selection is enabled and the current row is selectable, toggle the selection state of the current row. Additionally, if row actions are enabled, trigger an ojRowAction event.</td>\n    </tr>\n    <tr>\n      <td rowspan=\"1\" style=\"vertical-align:top;\">\n        Header Cell\n      </td>\n      <td>Tap</td>\n      <td>Focus the header cell. Additionally, if column selection is enabled and the current column is selectable, toggle the selection state of the current column.</td>\n    </tr>\n    <tr>\n      <td rowspan=\"1\" style=\"vertical-align:top;\">\n        Footer Cell\n      </td>\n      <td>Tap</td>\n      <td>Focus the footer cell. Additionally, if column selection is enabled and the current column is selectable, toggle the selection state of the current column.</td>\n    </tr>\n    <tr>\n      <td rowspan=\"1\" style=\"vertical-align:top;\">\n        No Data Cell\n      </td>\n      <td>Tap</td>\n      <td>Focus the no data cell.</td>\n    </tr>\n  </tbody>\n</table>\n\n\n<h3 id=\"a11y-section\">\n  Accessibility\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#a11y-section\"></a>\n</h3>\n\n<p>The Table implements the grid role for accessibility. This enables the Table to be compatible with the special 'table\nreading' commands that most assistive technologies provide in addition to the standard keyboard interactions described\nin the Keyboard End User Information section above.</p>\n\n<p>An application is required to include contextual information to make the Table accessible for assistive technologies\nby providing one or more the following properties as appropriate:</p>\n\n<ul>\n  <li>aria-labelledby</li>\n  <li>aria-label</li>\n</ul>\n\n<p>Additionally, an application should specify at least 1 accessible row header per row by providing a value for the\n<code>row.accessible-row-header</code> attribute. The information in the cell(s) specified will be used by assistive technologies\nto convey basic contextual information for the focused row. For example, if a user is arrowing up or down in an 'Amount Due'\ncolumn, having something like '$500' read out does not provide any helpful information as to who or what that amount corresponds\nto. If an 'Account Holder' column is specified as an accessible row header, then something like 'Larry Ellison, $500' would be read\nout instead. Providing this additional row context is essential for creating accessible tables.</p>\n\n<h4>Managing Tab Stops</h4>\n<p>The Table does not manipulate the <code>tabindex</code> attribute of cell contents. For oj-c components specified\nas children of the Table, <code>tabindex</code> management will happen automatically. Otherwise, applications must\nspecifically set the <code>tabindex</code> of tabbable child elements based on the <code>isTabbable</code> property\nof the template context.</p>\n<p>However, there may be cases where applications do not have access to the tabbable elements themselves. For\nexample, a third-party component that does not support JET's new <code>tabindex</code> management. In that case,\napplications can specify the <code>data-oj-manage-tabs</code> attribute on any tabbable elements (or any one of\ntheir ancestors) to ensure the Table remains a single tab stop for accessibility purposes.</p>\n\n<h4>Custom Colors</h4>\n<p>Using colors, including background and text colors, is not accessible if it is the only way information is conveyed.\nLow vision users may not be able to see the different colors, and in high contrast mode the colors are removed.\nThe Redwood approved way to show status is to use a badge.</p>\n\n<h3 id=\"background-section\">\n  Background Color\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#background-section\"></a>\n</h3>\n\n<p>The Table's background color is managed via the --oj-current-bg-color CSS variable. If a different\nbackground color is desired, one can be set by adding a background color class on the Table. <b>The Table does\nnot support background colors with transparencies.</b> See the 'Background Color' cookbook demo for examples.\n</p>\n\n<h3 id=\"data-attributes-section\">\n  Custom Data Attributes\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#data-attributes-section\"></a>\n</h3>\n\n<p>Table supports the following custom data attributes.\n<table class=\"keyboard-table\">\n  <thead>\n    <tr>\n      <th>Name</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><kbd>data-oj-as</kbd></td>\n      <td><p>Provides an alias for a specific template instance and has the same subproperties as the $current variable.</p>\n        <pre class=\"prettyprint\"><code>&lt;oj-c-table id=\"table\">\n  &lt;template slot=\"cellTemplate\" data-oj-as=\"cell\">\n  &lt;/template>\n&lt;/oj-c-table></code></pre>\n      </td>\n    </tr>\n    <tr>\n      <td><kbd>data-oj-clickthrough</kbd></td>\n      <td><p>Specify on any element inside a cell where you want to control whether the Table should perform actions triggered\n        by a click event originating from the element or one of its descendants.</p>\n        <p>For example, if you specify this attribute with a value of \"disabled\" on a button inside a cell, the Table\n        will not select the row or trigger an action event when a user clicks on the button.</p>\n        <pre class=\"prettyprint\"><code>&lt;oj-c-table id=\"table\">\n  &lt;template slot=\"cellTemplate\">\n    &lt;oj-c-button data-oj-clickthrough=\"disabled\">&lt;/oj-c-button>\n  &lt;/template>\n&lt;/oj-c-table></code></pre>\n      </td>\n    </tr>\n    <tr>\n      <td><kbd>data-oj-manage-tabs</kbd></td>\n      <td><p>The Table does not manipulate the <code>tabindex</code> attribute of cell contents. For oj-c elements\n        specified as children of the Table, <code>tabindex</code> management will happen automatically. Otherwise,\n        applications must specifically set the <code>tabindex</code> of tabbable child elements based on the\n        <code>isTabbable</code> property of the template context.</p>\n        <p>However, there may be cases where applications do not have access to the tabbable elements themselves. For\n        example, a third-party component that does not support JET's new <code>tabindex</code> management. In that case,\n        applications can specify the <code>data-oj-manage-tabs</code> attribute on any tabbable elements (or any one\n        of their ancestors) to ensure the Table remains a single tab stop for accessibility purposes.</p>\n        <pre class=\"prettyprint\"><code>&lt;oj-c-table>\n  &lt;template slot=\"cellTemplate1\" data-oj-as=\"cell\">\n    &lt;a href=\"#\" :tabindex=\"[[cell.isTabbable ? 0 : -1]]\">Link&lt;/a>\n  &lt;/template>\n  &lt;template slot=\"cellTemplate2\" data-oj-as=\"cell\">\n    &lt;some-tabbable-component data-oj-manage-tabs>&lt;/some-tabbable-component>\n  &lt;/template>\n&lt;/oj-c-table></code></pre>\n      </td>\n    </tr>\n  </tbody>\n</table>",
     "scope": "static",
     "tagWithoutBrackets": "oj-c-table",
     "tagWithBrackets": "<oj-c-table>",
@@ -1278,7 +1278,15 @@
           "names": [
             "string|number"
           ]
-        }
+        },
+        "tstype": [
+          {
+            "target": "Type",
+            "value": "keyof D",
+            "jsdocOverride": true,
+            "for": "field"
+          }
+        ]
       },
       {
         "name": "headerText",
@@ -1413,6 +1421,71 @@
             "for": "footerPadding"
           }
         ]
+      },
+      {
+        "name": "tooltip",
+        "description": "Specifies whether default tooltips are enabled for data cells in this column. Valid string values include 'enabled'\nand 'disabled'.",
+        "optional": true,
+        "type": {
+          "names": [
+            "string|function"
+          ]
+        },
+        "tstype": [
+          {
+            "target": "Type",
+            "value": "string|(context: oj-c.Table.RowContext<K, D>) => \"disabled\" | \"enabled\"",
+            "jsdocOverride": true,
+            "for": "tooltip"
+          }
+        ]
+      },
+      {
+        "name": "headerTooltip",
+        "description": "Specifies whether the default tooltip is enabled for the header cell in this column. Valid string values include\n'enabled' and 'disabled'.",
+        "optional": true,
+        "type": {
+          "names": [
+            "\"disabled\"",
+            "\"enabled\""
+          ]
+        }
+      },
+      {
+        "name": "footerTooltip",
+        "description": "Specifies whether the default tooltip is enabled for the footer cell in this column. Valid string values include\n'enabled' and 'disabled'.",
+        "optional": true,
+        "type": {
+          "names": [
+            "\"disabled\"",
+            "\"enabled\""
+          ]
+        }
+      },
+      {
+        "name": "sticky",
+        "description": "Whether this column should be prevented from scrolling out of view.",
+        "optional": true,
+        "type": {
+          "names": [
+            "\"disabled\"",
+            "\"enabled\""
+          ]
+        }
+      },
+      {
+        "name": "horizontalAlignment",
+        "description": "The horizontal alignment of the column.",
+        "optional": true,
+        "type": {
+          "names": [
+            "\"center\"",
+            "\"end\"",
+            "\"start\"",
+            "\"left\"",
+            "\"right\""
+          ]
+        }
       }
     ]
   },
@@ -1542,6 +1615,14 @@
             "any"
           ]
         },
+        "tstype": [
+          {
+            "target": "Type",
+            "value": "string|C",
+            "jsdocOverride": true,
+            "for": "columnKey"
+          }
+        ],
         "ojvalues": [
           {
             "name": "oj-c-table_selection",
@@ -1615,6 +1696,14 @@
             "any"
           ]
         },
+        "tstype": [
+          {
+            "target": "Type",
+            "value": "string|C",
+            "jsdocOverride": true,
+            "for": "columnKey"
+          }
+        ],
         "ojvalues": [
           {
             "name": "oj-c-table_selection",
@@ -1688,6 +1777,14 @@
             "any"
           ]
         },
+        "tstype": [
+          {
+            "target": "Type",
+            "value": "string|C",
+            "jsdocOverride": true,
+            "for": "columnKey"
+          }
+        ],
         "ojvalues": [
           {
             "name": "oj-c-table_selection",
@@ -1743,6 +1840,14 @@
             "any"
           ]
         },
+        "tstype": [
+          {
+            "target": "Type",
+            "value": "string|C",
+            "jsdocOverride": true,
+            "for": "columnKey"
+          }
+        ],
         "ojvalues": [
           {
             "name": "oj-c-table_selection",
@@ -1798,6 +1903,14 @@
             "any"
           ]
         },
+        "tstype": [
+          {
+            "target": "Type",
+            "value": "string|C",
+            "jsdocOverride": true,
+            "for": "columnKey"
+          }
+        ],
         "ojvalues": [
           {
             "name": "oj-c-table_selection",
@@ -1853,6 +1966,14 @@
             "any"
           ]
         },
+        "tstype": [
+          {
+            "target": "Type",
+            "value": "string|C",
+            "jsdocOverride": true,
+            "for": "columnKey"
+          }
+        ],
         "ojvalues": [
           {
             "name": "oj-c-table_selection",
@@ -1908,6 +2029,14 @@
             "any"
           ]
         },
+        "tstype": [
+          {
+            "target": "Type",
+            "value": "string|C",
+            "jsdocOverride": true,
+            "for": "columnKey"
+          }
+        ],
         "ojvalues": [
           {
             "name": "oj-c-table_selection",
@@ -1981,6 +2110,14 @@
             "any"
           ]
         },
+        "tstype": [
+          {
+            "target": "Type",
+            "value": "string|C",
+            "jsdocOverride": true,
+            "for": "columnKey"
+          }
+        ],
         "ojvalues": [
           {
             "name": "oj-c-table_selection",
@@ -2036,6 +2173,14 @@
             "any"
           ]
         },
+        "tstype": [
+          {
+            "target": "Type",
+            "value": "string|C",
+            "jsdocOverride": true,
+            "for": "columnKey"
+          }
+        ],
         "ojvalues": [
           {
             "name": "oj-c-table_selection",
@@ -2091,6 +2236,14 @@
             "any"
           ]
         },
+        "tstype": [
+          {
+            "target": "Type",
+            "value": "string|C",
+            "jsdocOverride": true,
+            "for": "columnKey"
+          }
+        ],
         "ojvalues": [
           {
             "name": "oj-c-table_selection",

package/oj-c/TagCloud.json

@@ -6,7 +6,7 @@
     "memberof": "oj-c",
     "longname": "oj-c.TagCloud",
     "kind": "class",
-    "classdesc": "<h3 id=\"tagCloudOverview-section\">\n  JET Tag Cloud\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#tagCloudOverview-section\"></a>\n</h3>\n*\n<p>Tag clouds are used to display text data with\nthe importance of each tag shown with font size or color.</p>\n\n\n<pre class=\"prettyprint\">\n<code>\n&lt;oj-c-tag-cloud\n  data=\"[[dataProvider]]\">\n&lt;/oj-c-tag-cloud>\n</code>\n</pre>\n\n\n<p>When using font colors as a data dimension for tag clouds, the application\nneeds to ensure that they meet minimum contrast requirements. Not all colors\nin the default value ramp provided by oj.ColorAttributeGroupHandler\nwill meet minimum contrast requirements.</p>\n\n<h3 id=\"keyboard-section\">\n  Keyboard End User Information\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#keyboard-section\"></a>\n</h3>\n<table class=\"keyboard-table\">\n  <thead>\n    <tr>\n      <th>Key</th>\n      <th>Action</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><kbd>Tab</kbd></td>\n      <td>Move focus to next element.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + Tab</kbd></td>\n      <td>Move focus to previous element.</td>\n    </tr>\n    <tr>\n      <td><kbd>UpArrow</kbd></td>\n      <td>Move focus and selection to previous data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>DownArrow</kbd></td>\n      <td>Move focus and selection to next data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>LeftArrow</kbd></td>\n      <td>Move focus and selection to previous data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>RightArrow</kbd></td>\n      <td>Move focus and selection to next data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + UpArrow</kbd></td>\n      <td>Move focus and multi-select previous data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + DownArrow</kbd></td>\n      <td>Move focus and multi-select next data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + LeftArrow</kbd></td>\n      <td>Move focus and multi-select previous data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + RightArrow</kbd></td>\n      <td>Move focus and multi-select next data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + UpArrow</kbd></td>\n      <td>Move focus to previous data item, without changing the current selection.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + DownArrow</kbd></td>\n      <td>Move focus to next data item, without changing the current selection.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + LeftArrow</kbd></td>\n      <td>Move focus to previous data item, without changing the current selection.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + RightArrow</kbd></td>\n      <td>Move focus to next data item, without changing the current selection.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + Spacebar</kbd></td>\n      <td>Multi-select data item with focus.</td>\n    </tr>\n    <tr>\n      <td><kbd>Enter</kbd></td>\n      <td>Open a link when the <code class=\"prettyprint\">url</code> for a data item is set.</td>\n    </tr>\n  </tbody>\n</table>\n\n<h3 id=\"a11y-section\">\n  Accessibility\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#a11y-section\"></a>\n</h3>\nTo make your component accessible, the application is required to include contextual information for screender readers using one or more the following methods as appropriate:\n <ul>\n  <li>aria-describedby</li>\n  <li>aria-labelledby</li>\n  <li>aria-label</li>\n  <li>short-desc property of your items</li>\n </ul>\n<p>\n If your application has custom keyboard and touch shortcuts implemented for the component, these shortcuts can conflict with those of the component. It is the application's responsibility to disclose these custom shortcuts, possibly via a datatip or help popup.\n</p>\n<p>\n When using colors as a data dimension for tag clouds, the application needs to ensure that they meet <a target=\"_blank\" href=\"https://www.w3.org/TR/WCAG21/#contrast-minimum\">minimum contrast requirements</a>.\n</p>\n\n<h3 id=\"perf-section\">\n  Performance\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#perf-section\"></a>\n</h3>\n\n<h4>Shaped Data</h4>\n<p>As a rule of thumb, it's recommended that applications use <a href=\"https://jet.oraclecorp.com/trunk/jetCookbook.html?component=tagCloudCorepack&demo=shapedData\">shaped data</a> if possible for performance gains.</p>\n\n<h4>Layout</h4>\n<p>Rectangular layouts are faster than cloud layouts and are recommended for larger data sets.\n</p>\n\n\n<h3 id=\"touch-section\">\nTouch End User Information\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#touch-section\"></a>\n</h3>\n\n<table class=\"keyboard-table\">\n  <thead>\n    <tr>\n      <th>Target</th>\n      <th>Gesture</th>\n      <th>Action</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td rowspan=\"4\">Data Item</td>\n      <td rowspan=\"2\"><kbd>Tap</kbd></td>\n      <td>Select when <code class=\"prettyprint\">selectionMode</code> is enabled.</td>\n    </tr>\n    <tr>\n       <td>Open a link when the <code class=\"prettyprint\">url</code> for a data item is set.</td>\n    </tr>\n  </tbody>\n</table>",
+    "classdesc": "<h3 id=\"tagCloudOverview-section\">\n  JET Tag Cloud\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#tagCloudOverview-section\"></a>\n</h3>\n*\n<p>Tag clouds are used to display text data with\nthe importance of each tag shown with font size or color.</p>\n\n\n<pre class=\"prettyprint\">\n<code>\n&lt;oj-c-tag-cloud\n  data=\"[[dataProvider]]\">\n&lt;/oj-c-tag-cloud>\n</code>\n</pre>\n\n\n<p>When using font colors as a data dimension for tag clouds, the application\nneeds to ensure that they meet minimum contrast requirements. Not all colors\nin the default value ramp provided by oj.ColorAttributeGroupHandler\nwill meet minimum contrast requirements.</p>\n\n<h3 id=\"keyboard-section\">\n  Keyboard End User Information\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#keyboard-section\"></a>\n</h3>\n<table class=\"keyboard-table\">\n  <thead>\n    <tr>\n      <th>Key</th>\n      <th>Action</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><kbd>Tab</kbd></td>\n      <td>Move focus to next element.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + Tab</kbd></td>\n      <td>Move focus to previous element.</td>\n    </tr>\n    <tr>\n      <td><kbd>UpArrow</kbd></td>\n      <td>Move focus and selection to previous data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>DownArrow</kbd></td>\n      <td>Move focus and selection to next data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>LeftArrow</kbd></td>\n      <td>Move focus and selection to previous data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>RightArrow</kbd></td>\n      <td>Move focus and selection to next data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + UpArrow</kbd></td>\n      <td>Move focus and multi-select previous data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + DownArrow</kbd></td>\n      <td>Move focus and multi-select next data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + LeftArrow</kbd></td>\n      <td>Move focus and multi-select previous data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + RightArrow</kbd></td>\n      <td>Move focus and multi-select next data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + UpArrow</kbd></td>\n      <td>Move focus to previous data item, without changing the current selection.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + DownArrow</kbd></td>\n      <td>Move focus to next data item, without changing the current selection.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + LeftArrow</kbd></td>\n      <td>Move focus to previous data item, without changing the current selection.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + RightArrow</kbd></td>\n      <td>Move focus to next data item, without changing the current selection.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + Spacebar</kbd></td>\n      <td>Multi-select data item with focus.</td>\n    </tr>\n    <tr>\n      <td><kbd>Enter</kbd></td>\n      <td>Open a link when the <code class=\"prettyprint\">url</code> for a data item is set.</td>\n    </tr>\n     <tr>\n      <td><kbd>Shift+F10</kbd></td>\n      <td>Launch the context menu if there is one associated with the current item.</td>\n    </tr>\n  </tbody>\n</table>\n\n<h3 id=\"a11y-section\">\n  Accessibility\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#a11y-section\"></a>\n</h3>\nTo make your component accessible, the application is required to include contextual information for screender readers using one or more the following methods as appropriate:\n <ul>\n  <li>aria-describedby</li>\n  <li>aria-labelledby</li>\n  <li>aria-label</li>\n  <li>short-desc property of your items</li>\n </ul>\n<p>\n If your application has custom keyboard and touch shortcuts implemented for the component, these shortcuts can conflict with those of the component. It is the application's responsibility to disclose these custom shortcuts, possibly via a datatip or help popup.\n</p>\n<p>\n When using colors as a data dimension for tag clouds, the application needs to ensure that they meet <a target=\"_blank\" href=\"https://www.w3.org/TR/WCAG21/#contrast-minimum\">minimum contrast requirements</a>.\n</p>\n\n<h3 id=\"perf-section\">\n  Performance\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#perf-section\"></a>\n</h3>\n\n<h4>Shaped Data</h4>\n<p>As a rule of thumb, it's recommended that applications use <a href=\"https://jet.oraclecorp.com/trunk/jetCookbook.html?component=tagCloudCorepack&demo=shapedData\">shaped data</a> if possible for performance gains.</p>\n\n<h4>Layout</h4>\n<p>Rectangular layouts are faster than cloud layouts and are recommended for larger data sets.\n</p>\n\n\n<h3 id=\"touch-section\">\nTouch End User Information\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#touch-section\"></a>\n</h3>\n\n<table class=\"keyboard-table\">\n  <thead>\n    <tr>\n      <th>Target</th>\n      <th>Gesture</th>\n      <th>Action</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td rowspan=\"3\">Data Item</td>\n      <td rowspan=\"2\"><kbd>Tap</kbd></td>\n      <td>Select when <code class=\"prettyprint\">selectionMode</code> is enabled.</td>\n    </tr>\n    <tr>\n       <td>Open a link when the <code class=\"prettyprint\">url</code> for a data item is set.</td>\n    </tr>\n    <tr>\n       <td><kbd>Press & Hold</kbd></td>\n       <td>Display context menu on release.</td>\n    </tr>\n    <tr>\n       <td>Background</td>\n       <td><kbd>Press & Hold</kbd></td>\n       <td>Display context menu on release.</td>\n    </tr>\n  </tbody>\n</table>",
     "scope": "static",
     "tagWithoutBrackets": "oj-c-tag-cloud",
     "tagWithBrackets": "<oj-c-tag-cloud>",
@@ -315,6 +315,32 @@
       }
     ]
   },
+  {
+    "memberof": "oj-c.TagCloud",
+    "id": "oj-c.TagCloud#contextMenuConfig",
+    "name": "contextMenuConfig",
+    "kind": "member",
+    "longname": "oj-c.TagCloud#contextMenuConfig",
+    "optional": true,
+    "scope": "instance",
+    "description": "Specifies a context menu configuration.\nIt takes the keys `accessibleLabel` and `items`,\nwhere `accessibleLabel` is optional and items required . `items` function returns an array\nof menu item object representations that indicates what menu items are going to be part of\nmenu based on some specific context menu context.\n<table>\n<tr><th align='left'>Context Menu Item Type</th><th align='left'>Def</th></tr>\n<tr><td>ContextMenuSeparator</td><td>{ type: 'separator'}</td></tr>\n<tr><td>MenuItem</td><td>{\ntype?: 'item';\nlabel: string;\nkey: string;\ndisabled?: boolean;\nonAction?: () => void;\nstartIcon?: MenuIcon;\nendIcon?: MenuIcon;\nvariant?: 'standard' | 'destructive';\n};</td></tr>\n<tr><td>ContextMenuSubMenu</td><td>{\ntype: 'submenu';\nlabel?: string;\ndisabled?: boolean;\nstartIcon?: string;\nitems?: Array&lt;ContextMenuItems&gt;;\n};</td></tr>\n<tr><td>ContextMenuSelectSingle</td><td>{\ntype: 'selectsingle';\nkey?: string;\nitems?: Array&lt;MenuSelectItem&gt;;\nselection?: string;\nonSelection?: (detail: { value: string }) => void;\n};</td></tr>\n<tr><td>ContextMenuSelectMultiple</td><td>{\ntype: 'selectmultiple';\nkey?: string;\nitems?: Array&lt;MenuSelectItem&gt;;\nselection?: Array&lt;string&gt;;\nonSelection?: (detail: { value: Array&lt;string&gt; }) => void;\n};</td></tr>\n<tr><td>MenuIcon</td><td>{\ntype?: 'class';\n    class: string;\n  }\n| {\n    type: 'img';\n   src: string;\n  };</td></tr>\n<tr><td>MenuSelectItem</td><td>{\nlabel: string;\ndisabled?: boolean;\nendIcon?: MenuIcon;\nvalue: string;\n}</td></tr>\n</table>",
+    "meta": {
+      "filename": "tag-cloud.tsx",
+      "path": "web/components/oj-c/tag-cloud"
+    },
+    "type": {
+      "names": [
+        "object"
+      ]
+    },
+    "tstype": [
+      {
+        "target": "Type",
+        "value": "oj-c.TagCloud.TagCloudContextMenuConfig<K, D>",
+        "jsdocOverride": true
+      }
+    ]
+  },
   {
     "memberof": "oj-c.TagCloud",
     "id": "oj-c.TagCloud#setProperty",
@@ -407,6 +433,97 @@
       }
     ]
   },
+  {
+    "memberof": "oj-c.TagCloud",
+    "id": "oj-c.TagCloud#event:ojContextMenuAction",
+    "name": "ojContextMenuAction",
+    "kind": "event",
+    "longname": "oj-c.TagCloud#event:ojContextMenuAction",
+    "description": "Triggered when a menu item is clicked, whether by keyboard, mouse, or touch events.",
+    "meta": {
+      "filename": "tag-cloud.tsx",
+      "path": "web/components/oj-c/tag-cloud"
+    },
+    "scope": "instance",
+    "properties": [
+      {
+        "name": "menuItemKey",
+        "optional": false,
+        "type": {
+          "names": [
+            "string"
+          ]
+        }
+      },
+      {
+        "name": "contextMenuContext",
+        "optional": false,
+        "type": {
+          "names": [
+            "any"
+          ]
+        },
+        "tstype": [
+          {
+            "target": "Type",
+            "value": "C",
+            "jsdocOverride": true,
+            "for": "contextMenuContext"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "memberof": "oj-c.TagCloud",
+    "id": "oj-c.TagCloud#event:ojContextMenuSelection",
+    "name": "ojContextMenuSelection",
+    "kind": "event",
+    "longname": "oj-c.TagCloud#event:ojContextMenuSelection",
+    "description": "Triggered when a select menu item is clicked, whether by keyboard, mouse, or touch events.",
+    "meta": {
+      "filename": "tag-cloud.tsx",
+      "path": "web/components/oj-c/tag-cloud"
+    },
+    "scope": "instance",
+    "properties": [
+      {
+        "name": "value",
+        "optional": false,
+        "type": {
+          "names": [
+            "string|Array<string>"
+          ]
+        }
+      },
+      {
+        "name": "contextMenuContext",
+        "optional": false,
+        "type": {
+          "names": [
+            "any"
+          ]
+        },
+        "tstype": [
+          {
+            "target": "Type",
+            "value": "C",
+            "jsdocOverride": true,
+            "for": "contextMenuContext"
+          }
+        ]
+      },
+      {
+        "name": "menuSelectionGroupKey",
+        "optional": false,
+        "type": {
+          "names": [
+            "string"
+          ]
+        }
+      }
+    ]
+  },
   {
     "memberof": "oj-c.TagCloud",
     "id": "oj-c.TagCloud#itemTemplate",
@@ -475,7 +592,7 @@
     "name": "touchDoc",
     "kind": "member",
     "longname": "oj-c.TagCloud.touchDoc",
-    "description": "<table class=\"keyboard-table\">\n  <thead>\n    <tr>\n      <th>Target</th>\n      <th>Gesture</th>\n      <th>Action</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td rowspan=\"4\">Data Item</td>\n      <td rowspan=\"2\"><kbd>Tap</kbd></td>\n      <td>Select when <code class=\"prettyprint\">selectionMode</code> is enabled.</td>\n    </tr>\n    <tr>\n       <td>Open a link when the <code class=\"prettyprint\">url</code> for a data item is set.</td>\n    </tr>\n  </tbody>\n</table>",
+    "description": "<table class=\"keyboard-table\">\n  <thead>\n    <tr>\n      <th>Target</th>\n      <th>Gesture</th>\n      <th>Action</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td rowspan=\"3\">Data Item</td>\n      <td rowspan=\"2\"><kbd>Tap</kbd></td>\n      <td>Select when <code class=\"prettyprint\">selectionMode</code> is enabled.</td>\n    </tr>\n    <tr>\n       <td>Open a link when the <code class=\"prettyprint\">url</code> for a data item is set.</td>\n    </tr>\n    <tr>\n       <td><kbd>Press & Hold</kbd></td>\n       <td>Display context menu on release.</td>\n    </tr>\n    <tr>\n       <td>Background</td>\n       <td><kbd>Press & Hold</kbd></td>\n       <td>Display context menu on release.</td>\n    </tr>\n  </tbody>\n</table>",
     "memberof": "oj-c.TagCloud",
     "meta": {
       "filename": "tag-cloud.tsx",
@@ -488,7 +605,7 @@
     "name": "keyboardDoc",
     "kind": "member",
     "longname": "oj-c.TagCloud.keyboardDoc",
-    "description": "<table class=\"keyboard-table\">\n  <thead>\n    <tr>\n      <th>Key</th>\n      <th>Action</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><kbd>Tab</kbd></td>\n      <td>Move focus to next element.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + Tab</kbd></td>\n      <td>Move focus to previous element.</td>\n    </tr>\n    <tr>\n      <td><kbd>UpArrow</kbd></td>\n      <td>Move focus and selection to previous data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>DownArrow</kbd></td>\n      <td>Move focus and selection to next data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>LeftArrow</kbd></td>\n      <td>Move focus and selection to previous data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>RightArrow</kbd></td>\n      <td>Move focus and selection to next data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + UpArrow</kbd></td>\n      <td>Move focus and multi-select previous data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + DownArrow</kbd></td>\n      <td>Move focus and multi-select next data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + LeftArrow</kbd></td>\n      <td>Move focus and multi-select previous data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + RightArrow</kbd></td>\n      <td>Move focus and multi-select next data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + UpArrow</kbd></td>\n      <td>Move focus to previous data item, without changing the current selection.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + DownArrow</kbd></td>\n      <td>Move focus to next data item, without changing the current selection.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + LeftArrow</kbd></td>\n      <td>Move focus to previous data item, without changing the current selection.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + RightArrow</kbd></td>\n      <td>Move focus to next data item, without changing the current selection.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + Spacebar</kbd></td>\n      <td>Multi-select data item with focus.</td>\n    </tr>\n    <tr>\n      <td><kbd>Enter</kbd></td>\n      <td>Open a link when the <code class=\"prettyprint\">url</code> for a data item is set.</td>\n    </tr>\n  </tbody>\n</table>",
+    "description": "<table class=\"keyboard-table\">\n  <thead>\n    <tr>\n      <th>Key</th>\n      <th>Action</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><kbd>Tab</kbd></td>\n      <td>Move focus to next element.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + Tab</kbd></td>\n      <td>Move focus to previous element.</td>\n    </tr>\n    <tr>\n      <td><kbd>UpArrow</kbd></td>\n      <td>Move focus and selection to previous data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>DownArrow</kbd></td>\n      <td>Move focus and selection to next data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>LeftArrow</kbd></td>\n      <td>Move focus and selection to previous data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>RightArrow</kbd></td>\n      <td>Move focus and selection to next data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + UpArrow</kbd></td>\n      <td>Move focus and multi-select previous data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + DownArrow</kbd></td>\n      <td>Move focus and multi-select next data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + LeftArrow</kbd></td>\n      <td>Move focus and multi-select previous data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift + RightArrow</kbd></td>\n      <td>Move focus and multi-select next data item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + UpArrow</kbd></td>\n      <td>Move focus to previous data item, without changing the current selection.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + DownArrow</kbd></td>\n      <td>Move focus to next data item, without changing the current selection.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + LeftArrow</kbd></td>\n      <td>Move focus to previous data item, without changing the current selection.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + RightArrow</kbd></td>\n      <td>Move focus to next data item, without changing the current selection.</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl + Spacebar</kbd></td>\n      <td>Multi-select data item with focus.</td>\n    </tr>\n    <tr>\n      <td><kbd>Enter</kbd></td>\n      <td>Open a link when the <code class=\"prettyprint\">url</code> for a data item is set.</td>\n    </tr>\n     <tr>\n      <td><kbd>Shift+F10</kbd></td>\n      <td>Launch the context menu if there is one associated with the current item.</td>\n    </tr>\n  </tbody>\n</table>",
     "memberof": "oj-c.TagCloud",
     "meta": {
       "filename": "tag-cloud.tsx",
@@ -641,5 +758,56 @@
         ]
       }
     ]
+  },
+  {
+    "memberof": "oj-c.TagCloud",
+    "id": "oj-c.TagCloud.TagCloudContextMenuConfig",
+    "name": "TagCloudContextMenuConfig",
+    "kind": "typedef",
+    "longname": "oj-c.TagCloud.TagCloudContextMenuConfig",
+    "scope": "static",
+    "description": "",
+    "tsgenerictype": {
+      "target": "Type",
+      "value": "<K,D>",
+      "for": "genericTypeParameters"
+    },
+    "type": {
+      "names": [
+        "Object"
+      ]
+    },
+    "meta": {
+      "filename": "tag-cloud.tsx",
+      "path": "web/components/oj-c/tag-cloud"
+    },
+    "properties": [
+      {
+        "name": "accessibleLabel",
+        "optional": true,
+        "type": {
+          "names": [
+            "string"
+          ]
+        }
+      },
+      {
+        "name": "items",
+        "optional": false,
+        "type": {
+          "names": [
+            "function"
+          ]
+        },
+        "tstype": [
+          {
+            "target": "Type",
+            "value": "(context: C) => ContextMenuItems[]",
+            "jsdocOverride": true,
+            "for": "items"
+          }
+        ]
+      }
+    ]
   }
 ]

package/oj-c/TextArea.json

@@ -345,6 +345,13 @@
       "filename": "text-area.tsx",
       "path": "web/components/oj-c/text-area"
     },
+    "tsdeprecated": [
+      {
+        "type": "deprecated",
+        "since": "18.0.0",
+        "description": "Label truncation for 'start' and 'top' aligned labels is no longer recommended by the Redwood Design System. The default for labelWrapping was 'wrap' and that is now the only suggested pattern by UX design for 'start' and 'top' aligned labels. 'inside' aligned labels are always truncated per UX design and are not affected by this property's value."
+      }
+    ],
     "ojvalues": [
       {
         "name": "truncate",