@iress-oss/ids-mcp-server 5.14.2 → 5.20.1

package/generated/docs/components-popover-docs.md

@@ -1,464 +0,0 @@
-[](#popover)Popover
-===================
-
-Overview
---------
-
-A popover is panel that is toggled on/off by an activator button or text input. The panel is positioned relative to its activator element.
-
-Toggle popover
-
-A little more information about this area.
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressPopover activator\={<IressButton\>Toggle popover</IressButton\>}\>
-  <IressPanel className\="iress-u-text"\>
-    A little more information about this area.  </IressPanel\>
-</IressPopover\>
-
-Copy
-
-[](#usage)Usage
----------------
-
-### [](#activator)Activator
-
-For the popover to render, the `activator` property is required. It is the element used to trigger the popover, and works best with an `IressButton`.
-
-Anything added as the children of the `IressPopover` component will be displayed in the popover panel.
-
-Toggle popover
-
-A little more information about this area.
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressPopover activator\={<IressButton\>Toggle popover</IressButton\>}\>
-  <IressPanel className\="iress-u-text"\>
-    A little more information about this area.  </IressPanel\>
-</IressPopover\>
-
-Copy
-
-### [](#the-show-property)The `show` property
-
-You can use state to control the popover by setting the `show` property to `true` or `false`. To sync your state with the popover, you can use the `onActivated` and `onDeactivated` prop.
-
-Show popover using state
-
-A little more information about this area.
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-import {
-  IressButton,
-  IressPanel,
-  IressPopover,
-  IressPopoverProps,
-} from '@iress-oss/ids-components';
-import { useState } from 'react';
-export const PopoverUsingState \= () \=> {
-  const \[show, setShow\] \= useState(false);
-  return (
-    <IressPopover
-      
-      activator\={
-        <IressButton onClick\={() \=> setShow(!show)}\>
-          Show popover using state        </IressButton\>
-      }
-      show\={show}
-      onActivated\={() \=> setShow(true)}
-      onDeactivated\={() \=> setShow(false)}
-    \>
-      <IressPanel\>A little more information about this area.</IressPanel\>
-    </IressPopover\>
-  );
-};
-
-Copy
-
-[](#behaviour)Behaviour
------------------------
-
-*   The popover is opened when the activator is pressed
-*   Once activated, the popover will set focus to popover content
-*   When the activator is pressed whilst the popover is open, it will close
-*   When the escape key is pressed while it is open, it will close
-*   When the popover panel loses focus, it will close
-
-[](#examples)Examples
----------------------
-
-### [](#align)Align
-
-The popover panel can be aligned in one of 12 positions relative to the activator element. The default value is `auto`.
-
-The popover panel's position will change dynamically based on the amount of space available in it's container window, so that it doesn't overflow.
-
-top-start
-
-Hello!
-
-top
-
-Hello!
-
-top-end
-
-Hello!
-
-left-start
-
-Hello!
-
-left
-
-Hello!
-
-left-end
-
-Hello!
-
-right-start
-
-Hello!
-
-right
-
-Hello!
-
-right-end
-
-Hello!
-
-bottom-start
-
-Hello!
-
-bottom
-
-Hello!
-
-bottom-end
-
-Hello!
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<div
-  style\={{
-    padding: '80px 150px'
-  }}
-\>
-  <IressStack gutter\="md"\>
-    <IressInline
-      gutter\="sm"
-      horizontalAlign\="center"
-    \>
-      <IressPopover
-        activator\={<IressTooltip align\="bottom-start" tooltipText\="Tooltips and popovers can go together if needed!"\><IressButton\>top-start</IressButton\></IressTooltip\>}
-        align\="top-start"
-      \>
-        <IressPanel className\="iress-u-text"\>
-          Hello!        </IressPanel\>
-      </IressPopover\>
-      <IressPopover
-        activator\={<IressButton\>top</IressButton\>}
-        align\="top"
-      \>
-        <IressPanel className\="iress-u-text"\>
-          Hello!        </IressPanel\>
-      </IressPopover\>
-      <IressPopover
-        activator\={<IressButton\>top-end</IressButton\>}
-        align\="top-end"
-      \>
-        <IressPanel className\="iress-u-text"\>
-          Hello!        </IressPanel\>
-      </IressPopover\>
-    </IressInline\>
-    <IressInline horizontalAlign\="between"\>
-      <IressStack gutter\="sm"\>
-        <IressInline horizontalAlign\="left"\>
-          <IressPopover
-            activator\={<IressButton\>left-start</IressButton\>}
-            align\="left-start"
-          \>
-            <IressPanel className\="iress-u-text"\>
-              Hello!            </IressPanel\>
-          </IressPopover\>
-        </IressInline\>
-        <IressInline horizontalAlign\="left"\>
-          <IressPopover
-            activator\={<IressButton\>left</IressButton\>}
-            align\="left"
-          \>
-            <IressPanel className\="iress-u-text"\>
-              Hello!            </IressPanel\>
-          </IressPopover\>
-        </IressInline\>
-        <IressInline horizontalAlign\="left"\>
-          <IressPopover
-            activator\={<IressButton\>left-end</IressButton\>}
-            align\="left-end"
-          \>
-            <IressPanel className\="iress-u-text"\>
-              Hello!            </IressPanel\>
-          </IressPopover\>
-        </IressInline\>
-      </IressStack\>
-      <IressStack gutter\="sm"\>
-        <IressInline horizontalAlign\="right"\>
-          <IressPopover
-            activator\={<IressButton\>right-start</IressButton\>}
-            align\="right-start"
-          \>
-            <IressPanel className\="iress-u-text"\>
-              Hello!            </IressPanel\>
-          </IressPopover\>
-        </IressInline\>
-        <IressInline horizontalAlign\="right"\>
-          <IressPopover
-            activator\={<IressButton\>right</IressButton\>}
-            align\="right"
-          \>
-            <IressPanel className\="iress-u-text"\>
-              Hello!            </IressPanel\>
-          </IressPopover\>
-        </IressInline\>
-        <IressInline horizontalAlign\="right"\>
-          <IressPopover
-            activator\={<IressButton\>right-end</IressButton\>}
-            align\="right-end"
-          \>
-            <IressPanel className\="iress-u-text"\>
-              Hello!            </IressPanel\>
-          </IressPopover\>
-        </IressInline\>
-      </IressStack\>
-    </IressInline\>
-    <IressInline
-      gutter\="sm"
-      horizontalAlign\="center"
-    \>
-      <IressPopover
-        activator\={<IressButton\>bottom-start</IressButton\>}
-        align\="bottom-start"
-      \>
-        <IressPanel className\="iress-u-text"\>
-          Hello!        </IressPanel\>
-      </IressPopover\>
-      <IressPopover
-        activator\={<IressButton\>bottom</IressButton\>}
-        align\="bottom"
-      \>
-        <IressPanel className\="iress-u-text"\>
-          Hello!        </IressPanel\>
-      </IressPopover\>
-      <IressPopover
-        activator\={<IressButton\>bottom-end</IressButton\>}
-        align\="bottom-end"
-      \>
-        <IressPanel className\="iress-u-text"\>
-          Hello!        </IressPanel\>
-      </IressPopover\>
-    </IressInline\>
-  </IressStack\>
-</div\>
-
-Copy
-
-### [](#width)Width
-
-Occasionally, you may have more information to display than the width set by the theme can comfortably show.
-
-This is where the `--iress-width` CSS token come in, it will allow you to set the width for the popover panel. For better results, its recommended to use it with the `--iress-max-width` CSS token, to allow your popovers to be responsive.
-
-**Note:** The `width` prop has been deprecated in favour of the CSS tokens.
-
-Toggle popover
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressPopover
-  activator\={<IressButton\>Toggle popover</IressButton\>}
-  container\={document.body}
-  style\={{
-    '--iress-max-width': '30rem',
-    '--iress-width': '100%'
-  }}
-\>
-  <IressPanel\>
-    <IressRow\>
-      <IressCol span\={6}\>
-        <IressText\>
-          Client        </IressText\>
-        <IressText noGutter\>
-          <ul\>
-            <li\>
-              Entity id 582323            </li\>
-            <li\>
-              Fruit Apple            </li\>
-            <li\>
-              Preferred email mamaduke@gmail.com            </li\>
-          </ul\>
-        </IressText\>
-      </IressCol\>
-      <IressCol span\={6}\>
-        <IressText\>
-          Client        </IressText\>
-        <IressText noGutter\>
-          <ul\>
-            <li\>
-              Entity id 8766            </li\>
-            <li\>
-              Fruit Orange            </li\>
-            <li\>
-              Preferred email felicity@yahoo.com            </li\>
-          </ul\>
-        </IressText\>
-      </IressCol\>
-    </IressRow\>
-  </IressPanel\>
-</IressPopover\>
-
-Copy
-
-### [](#overflow)Overflow
-
-Popovers can contain a wide variety of different content, including components that use popovers themselves (like Combobox). This can cause issues with overflowing content, so by default we allow popovers to grow in height based on their content.
-
-If you need to fix the height of a popover, you can set a maximum height using the `--iress-max-height` theme token on your popover. You'll also need to change the overflow behaviour by setting the `--iress-overflow-y` theme token:
-
-Normal popover
-
-Fixed height popover
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressInline gutter\="md"\>
-  <IressPopover
-    activator\={<IressButton\>Normal popover</IressButton\>}
-    align\="bottom-start"
-    container\={document.body}
-  \>
-    <IressPanel\>
-      <IressText noGutter\>
-        <p\>
-          His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.        </p\>
-      </IressText\>
-    </IressPanel\>
-  </IressPopover\>
-  <IressPopover
-    activator\={<IressButton\>Fixed height popover</IressButton\>}
-    align\="bottom-start"
-    container\={document.body}
-    style\={{
-      '--iress-max-height': '200px',
-      '--iress-overflow-y': 'auto'
-    }}
-  \>
-    <IressPanel\>
-      <IressText noGutter\>
-        <p\>
-          His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.        </p\>
-      </IressText\>
-    </IressPanel\>
-  </IressPopover\>
-</IressInline\>
-
-Copy
-
-### [](#container)Container
-
-By default, the popover will be rendered where its parent is rendered. If you need to render the popover in a different container, you can use the `container` prop.
-
-**Note:** If the `container` doesn’t exist when the portal is mounted, ensure you pass an element directly (not a ref) and specify null as the default value before it is set. This lets it wait for the root to be available.
-
-This will be the case when you are rendering into its parent container, which is not yet rendered when the popover is mounted. The example below shows how to use state instead of a reference to change where the popover is rendered.
-
-Toggle
-
-This content will be rendered in the parent container
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-export const PopoverParentContainer \= () \=> {
-  const \[parentContainer, setParentContainer\] \= useState<HTMLDivElement | null\>(
-    null,
-  );
-  return (
-    <div id\="parent" ref\={setParentContainer}\>
-      <IressPopover
-        activator\={<IressButton\>Toggle</IressButton\>}
-        container\={parentContainer}
-      \>
-        <IressPanel\>
-          This content will be rendered in the parent container        </IressPanel\>
-      </IressPopover\>
-    </div\>
-  );
-};
-
-Copy
-
-[](#iressinputpopover)`IressInputPopover`
------------------------------------------
-
-If you need a popover that is triggered by input changes, you can use the `IressInputPopover` component. This component has an additional `minLength` prop that allows you to specify the minimum number of characters required before the popover is shown.
-
-### [](#behaviour-1)Behaviour
-
-Input popovers work slightly different to normal popovers, where the focus inside the popover is **virtual**. This means that the popover content will act as if it is in focus, but the input will still be the actual focus.
-
-*   The popover is opened when the input has content that meets the `minLength` requirement
-*   The popover is closed when the input no longer meets the `minLength` requirement
-*   Once activated, virtual focus will be set to the popover content if it contains a menu (e.g. items will highlight as if in focus, but the user can still type in the input)
-*   When the `minLength` is 0, it will open on focus
-*   When the escape key is pressed while it is open, it will close
-*   When the input loses focus, it will close
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressInputPopover
-  activator\={<IressInput />}
-  container\={document.body}
-\>
-  <IressPanel className\="iress-u-text"\>
-    A little more information about this area.  </IressPanel\>
-</IressInputPopover\>
-
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Usage](#usage)
-    *   [Activator](#activator)
-    *   [The show property](#the-show-property)
-*   [Behaviour](#behaviour)
-*   [Examples](#examples)
-    *   [Align](#align)
-    *   [Width](#width)
-    *   [Overflow](#overflow)
-    *   [Container](#container)
-*   [IressInputPopover](#iressinputpopover)
-    *   [Behaviour](#behaviour-1)

package/generated/docs/components-progress-docs.md

@@ -1,104 +0,0 @@
-[](#progress)Progress
-=====================
-
-Overview
---------
-
-A progress component is used to indicate to a user the completion of a set of tasks or a process.
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressProgress
-  max\={30}
-  min\={10}
-  value\={20}
-/>
-
-Copy
-
-[](#usage)Usage
----------------
-
-Progress shows how far through a task or operation you are in a graphical way. The simplest way to use it to set the `value` to specify how much of the task the user has completed, relative to the `max` value (which defaults to 100).
-
-### [](#calculation-to-convert-value-in-to-width)Calculation to convert value in to width
-
-The following calculation is used to derive the width percentage:
-
-\[data-radix-scroll-area-viewport\] {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-}
-\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
-  display: none;
-}
-:where(\[data-radix-scroll-area-viewport\]) {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-:where(\[data-radix-scroll-area-content\]) {
-  flex-grow: 1;
-}
-
-Math.round(
-    ((this.value - this.min) / (this.max - this.min)) \* 100,
-)
-
-Copy
-
-This caters for those scenarios where the `min` or `max` values change.
-
-### [](#boundary-limits)Boundary limits
-
-There is a danger that the value can exceed the boundaries set in the `min` and `max` values, and cause the percentage width of the bar to overflow the indicator. To prevent this the following rules are applied:
-
-*   If the `value` is less than the `min` prop, it is reset to the `min` prop;
-*   If the `value` is more than the `max` prop, it is reset to the `max` prop;
-
-### [](#section-title)Section Title
-
-The `section-title` prop is used by assistive technologies and allows you to tailor the message announced when the progress component is selected. This could be to add extra context about where the user is in a process or section with a multi-part form.
-
-### [](#use-of-tokens)Use of tokens
-
-The message supports the use of two tokens within the announcement, which are replaced when the component is rendered. They are:
-
-*   `{{current}}` - replaced with the `value`;
-*   `{{max}}` - replaced with the maximum limit;
-
-For example, if the component has been implemented with a max of 10, a value of 6 has been set, and the default section title, the screen reader will announce:
-
-\[data-radix-scroll-area-viewport\] {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-}
-\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
-  display: none;
-}
-:where(\[data-radix-scroll-area-viewport\]) {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-:where(\[data-radix-scroll-area-content\]) {
-  flex-grow: 1;
-}
-
-Step 6 of 10
-
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Usage](#usage)
-    *   [Calculation to convert value in to width](#calculation-to-convert-value-in-to-width)
-    *   [Boundary limits](#boundary-limits)
-    *   [Section Title](#section-title)
-    *   [Use of tokens](#use-of-tokens)

package/generated/docs/components-radio-docs.md

@@ -1,107 +0,0 @@
-[](#radio)Radio
-===============
-
-Overview
---------
-
-A radio is a single option presented with a radio button. It is used to select a single option from multiple options. It is typically used in an `IressRadioGroup`.
-
-Radio button
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressRadio\>
-  Radio button
-</IressRadio\>
-
-Copy
-
-[](#examples)Examples
----------------------
-
-### [](#checked)Checked
-
-You can set the radio to `checked` by default. This is useful when you want to pre-select an option.
-
-**Note:** If you are using an `IressRadioGroup`, you should use the `value` prop on the `IressRadioGroup` to set the checked state of its `<IressRadio />` children, as the `checked` prop will be ignored.
-
-Checked radio button
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressRadio checked\>
-  Checked radio button
-</IressRadio\>
-
-Copy
-
-### [](#hidden-control)Hidden control
-
-You can hide the radio button and use a custom UI to display the content. Even though the radio button is hidden, it still acts like a radio.
-
-Hidden radio button
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressRadio hiddenControl\>
-  <IressPanel\>
-    Hidden radio button  </IressPanel\>
-</IressRadio\>
-
-Copy
-
-### [](#readonly)Readonly
-
-The `readOnly` prop changes how the radio is rendered. It will only render if the radio is checked (alongside a hidden input that contains the `value` if it was set), otherwise it not be rendered.
-
-It is understandable that this may not be the desired behavior for all use cases. If you need a radio that is not editable, but still visible, simply do not set the `readOnly` prop and set the `checked` prop instead.
-
-Radio button
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressStack gutter\="sm"\>
-  <IressRadio
-    defaultChecked
-    readOnly
-  \>
-    Radio button  </IressRadio\>
-  <IressRadio readOnly\>
-    Radio button  </IressRadio\>
-</IressStack\>
-
-Copy
-
-### [](#touch)Touch
-
-The `touch` prop adds the button-like border and padding to radio.
-
-Radio button
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressRadio touch\>
-  Radio button
-</IressRadio\>
-
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Examples](#examples)
-    *   [Checked](#checked)
-    *   [Hidden control](#hidden-control)
-    *   [Readonly](#readonly)
-    *   [Touch](#touch)