@progress/kendo-themes-html 14.7.1-dev.2 → 14.7.1-dev.4

package/dist/meta/segmented-control.json

@@ -0,0 +1,137 @@
+{
+  "component": "segmented-control",
+  "name": "SegmentedControl",
+  "components": [
+    {
+      "name": "SegmentedControl",
+      "isPrimary": true,
+      "rootClass": "k-segmented-control",
+      "options": [
+        {
+          "name": "size",
+          "values": [
+            "small",
+            "medium",
+            "large"
+          ],
+          "default": null
+        },
+        {
+          "name": "rounded",
+          "values": [
+            "none",
+            "small",
+            "medium",
+            "large",
+            "full"
+          ],
+          "default": null
+        }
+      ],
+      "states": [],
+      "aria": [
+        {
+          "prop": null,
+          "attribute": "role=\"group\"",
+          "description": "Sets the proper role for the group of buttons."
+        },
+        {
+          "prop": null,
+          "attribute": "aria-hidden=\"true\"",
+          "description": "The thumb is purely decorative and should be hidden from screen readers."
+        }
+      ],
+      "keyboard": [
+        {
+          "trigger": "Tab",
+          "behavior": "Moves focus into the Segmented Control to the selected button. Pressing Tab again moves focus out of the control to the next focusable element on the page."
+        },
+        {
+          "trigger": "Shift + Tab",
+          "behavior": "Moves focus out of the Segmented Control to the previous focusable element on the page."
+        },
+        {
+          "trigger": "ArrowLeft",
+          "behavior": "Moves focus to the previous button."
+        },
+        {
+          "trigger": "ArrowRight",
+          "behavior": "Moves focus to the next button."
+        },
+        {
+          "trigger": "Enter or Space",
+          "behavior": "Selects the focused button."
+        }
+      ],
+      "ux": [
+        {
+          "trigger": "Exclusive selection",
+          "behavior": "Only one segment can be active at a time."
+        },
+        {
+          "trigger": "Active indicator",
+          "behavior": "The selected segment is visually highlighted."
+        },
+        {
+          "trigger": "Disabled items",
+          "behavior": "Individual segments can be disabled and are non-interactive."
+        }
+      ]
+    },
+    {
+      "name": "SegmentedControlButton",
+      "isPrimary": true,
+      "rootClass": "k-segmented-control-button",
+      "options": [],
+      "states": [
+        "selected",
+        "hover",
+        "focus",
+        "disabled"
+      ],
+      "aria": [
+        {
+          "prop": null,
+          "attribute": "role=\"button\"",
+          "description": "Each button must have the appropriate button role."
+        },
+        {
+          "prop": null,
+          "attribute": "aria-pressed=\"true\"",
+          "description": "Only the selected button within the group will have this attribute set to true."
+        },
+        {
+          "prop": null,
+          "attribute": "aria-disabled=\"true\"",
+          "description": "Indicates that the button is disabled and cannot be interacted with."
+        },
+        {
+          "prop": null,
+          "attribute": "tabindex",
+          "description": "Roving tabindex: the focused button has tabindex=\"0\"; all others have tabindex=\"-1\"."
+        }
+      ],
+      "keyboard": [],
+      "ux": [
+        {
+          "trigger": "Selection",
+          "behavior": "Clicking this button selects it and automatically deselects the others."
+        },
+        {
+          "trigger": "Disabled state",
+          "behavior": "When disabled, this segment cannot be activated."
+        }
+      ]
+    }
+  ],
+  "resources": [
+    {
+      "url": "https://www.w3.org/TR/wai-aria-1.2/#button",
+      "text": "WAI-ARIA `button` Role Specification"
+    },
+    {
+      "url": "https://www.w3.org/TR/wai-aria-1.2/#group",
+      "text": "WAI-ARIA `group` Role Specification"
+    }
+  ]
+}

package/dist/meta/signature.json

@@ -0,0 +1,96 @@
+{
+  "component": "signature",
+  "name": "Signature",
+  "components": [
+    {
+      "name": "Signature",
+      "isPrimary": true,
+      "rootClass": "k-signature",
+      "options": [
+        {
+          "name": "size",
+          "values": [
+            "small",
+            "medium",
+            "large"
+          ],
+          "default": null
+        },
+        {
+          "name": "rounded",
+          "values": [
+            "none",
+            "small",
+            "medium",
+            "large",
+            "full"
+          ],
+          "default": null
+        },
+        {
+          "name": "fillMode",
+          "values": [
+            "solid",
+            "flat",
+            "outline"
+          ],
+          "default": null
+        }
+      ],
+      "states": [
+        "hover",
+        "focus",
+        "valid",
+        "invalid",
+        "disabled"
+      ],
+      "aria": [
+        {
+          "prop": null,
+          "attribute": "role=\"img\"",
+          "description": "Sets canvas role to img."
+        },
+        {
+          "prop": null,
+          "attribute": "aria-label",
+          "description": "Announces the purpose of the Signature."
+        },
+        {
+          "prop": null,
+          "attribute": "nodeName=\"button\"",
+          "description": "Renders action as a button element."
+        },
+        {
+          "prop": null,
+          "attribute": "aria-label",
+          "description": "Announces the purpose of the action button."
+        }
+      ],
+      "keyboard": [
+        {
+          "trigger": "Escape",
+          "behavior": "Closes the dialog if open."
+        }
+      ],
+      "ux": [
+        {
+          "trigger": "Canvas drawing",
+          "behavior": "The user draws their signature on a canvas area."
+        },
+        {
+          "trigger": "Clear",
+          "behavior": "A clear button resets the canvas to a blank state."
+        },
+        {
+          "trigger": "Maximize",
+          "behavior": "A maximize button expands the canvas for easier drawing."
+        },
+        {
+          "trigger": "Minimize",
+          "behavior": "A minimize button collapses the canvas back to its original size."
+        }
+      ]
+    }
+  ],
+  "resources": []
+}

package/dist/meta/skeleton.json

@@ -0,0 +1,35 @@
+{
+  "component": "skeleton",
+  "name": "Skeleton",
+  "components": [
+    {
+      "name": "Skeleton",
+      "isPrimary": true,
+      "rootClass": "k-skeleton",
+      "options": [],
+      "states": [],
+      "aria": [],
+      "keyboard": [],
+      "ux": [
+        {
+          "trigger": "Shape variants",
+          "behavior": "Available in text, rectangle, and circle shapes to mirror real content."
+        },
+        {
+          "trigger": "Animation",
+          "behavior": "A shimmer or pulse animation plays while content is loading."
+        },
+        {
+          "trigger": "Composition",
+          "behavior": "Multiple skeleton elements compose a placeholder that approximates the actual layout."
+        }
+      ]
+    }
+  ],
+  "resources": [
+    {
+      "url": "https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html",
+      "text": "WCAG 4.1.3 Status Messages — loading states should be announced to assistive technology"
+    }
+  ]
+}

package/dist/meta/slider.json

@@ -0,0 +1,159 @@
+{
+  "component": "slider",
+  "name": "Slider",
+  "components": [
+    {
+      "name": "Slider",
+      "isPrimary": true,
+      "rootClass": "k-slider",
+      "options": [],
+      "states": [
+        "hover",
+        "focus",
+        "active",
+        "disabled",
+        "readonly"
+      ],
+      "aria": [
+        {
+          "prop": null,
+          "attribute": "role=\"slider\"",
+          "description": "Sets the proper role for Slider."
+        },
+        {
+          "prop": null,
+          "attribute": "aria-label|aria-labelledby|title",
+          "description": "The Slider needs an accessible name to be assigned to it."
+        },
+        {
+          "prop": null,
+          "attribute": "aria-invalid=\"true\"",
+          "description": "Rendered only when the Slider is in a form and announces the invalid state."
+        },
+        {
+          "prop": null,
+          "attribute": "aria-valuenow",
+          "description": "Specifies the currently selected value in the Slider."
+        },
+        {
+          "prop": null,
+          "attribute": "aria-valuemin",
+          "description": "Specifies the minimum available value in the Slider."
+        },
+        {
+          "prop": null,
+          "attribute": "aria-valuemax",
+          "description": "Specifies the maximum available value in the Slider."
+        },
+        {
+          "prop": null,
+          "attribute": "aria-valuetext",
+          "description": "Specifies a human-readable text alternative to the numeric value. Provided by consuming applications."
+        },
+        {
+          "prop": null,
+          "attribute": "tabindex=\"0\"",
+          "description": "The element must be focusable. Disabled sliders are removed from tab order."
+        },
+        {
+          "prop": null,
+          "attribute": "aria-orientation=\"vertical\"",
+          "description": "Present only when slider is vertical."
+        },
+        {
+          "prop": null,
+          "attribute": "aria-disabled=\"true\"",
+          "description": "Rendered only when the Slider is disabled."
+        },
+        {
+          "prop": null,
+          "attribute": "aria-readonly=\"true\"",
+          "description": "Rendered only when the Slider is readonly. Readonly sliders remain focusable but their value cannot be changed."
+        },
+        {
+          "prop": null,
+          "attribute": "tabindex=\"-1\"",
+          "description": "Excludes the buttons from the natural tab order. Keyboard users use arrow keys on the drag handle."
+        },
+        {
+          "prop": null,
+          "attribute": "title",
+          "description": "Provides a tooltip describing the button action (e.g., \"Decrease\" or \"Increase\")."
+        },
+        {
+          "prop": null,
+          "attribute": "aria-hidden=\"true\"",
+          "description": "Hides the tick list from assistive technologies. Tick values are redundant with the drag handle value attributes."
+        },
+        {
+          "prop": null,
+          "attribute": "role=\"presentation\"",
+          "description": "Removes semantic meaning from individual tick elements. Ticks are visual-only markers."
+        },
+        {
+          "prop": null,
+          "attribute": "title",
+          "description": "Represents the value associated with the respective tick."
+        }
+      ],
+      "keyboard": [
+        {
+          "trigger": "ArrowDown or ArrowLeft",
+          "behavior": "Decreases value by small step."
+        },
+        {
+          "trigger": "ArrowUp or ArrowRight",
+          "behavior": "Increases value by small step."
+        },
+        {
+          "trigger": "Home",
+          "behavior": "Sets value to the Min value."
+        },
+        {
+          "trigger": "End",
+          "behavior": "Sets value to the Max value."
+        },
+        {
+          "trigger": "PageUp",
+          "behavior": "Increases value by large step."
+        },
+        {
+          "trigger": "PageDown",
+          "behavior": "Decreases value by large step."
+        }
+      ],
+      "ux": [
+        {
+          "trigger": "Drag",
+          "behavior": "The handle is dragged along the track to change the value."
+        },
+        {
+          "trigger": "Click",
+          "behavior": "Clicking on the track moves the handle to that position."
+        },
+        {
+          "trigger": "Range mode",
+          "behavior": "Two handles define a start and end value when range selection is enabled."
+        },
+        {
+          "trigger": "Tick marks",
+          "behavior": "Optional tick marks indicate fixed value intervals along the track."
+        },
+        {
+          "trigger": "Disabled state",
+          "behavior": "When disabled, the handle cannot be moved."
+        }
+      ]
+    }
+  ],
+  "resources": [
+    {
+      "url": "https://www.w3.org/TR/wai-aria-1.2/#slider",
+      "text": "WAI-ARIA specification for slider"
+    },
+    {
+      "url": "https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html",
+      "text": "WCAG 4.1.2 Name, Role, Value — slider must have accessible name and value"
+    }
+  ]
+}

package/dist/meta/smart-box.json

@@ -0,0 +1,240 @@
+{
+  "component": "smart-box",
+  "name": "SmartBox",
+  "components": [
+    {
+      "name": "SmartBox",
+      "isPrimary": true,
+      "rootClass": "k-smart-box",
+      "options": [
+        {
+          "name": "size",
+          "values": [
+            "small",
+            "medium",
+            "large"
+          ],
+          "default": null
+        },
+        {
+          "name": "rounded",
+          "values": [
+            "none",
+            "small",
+            "medium",
+            "large",
+            "full"
+          ],
+          "default": null
+        },
+        {
+          "name": "fillMode",
+          "values": [
+            "solid",
+            "flat",
+            "outline"
+          ],
+          "default": null
+        }
+      ],
+      "states": [
+        "hover",
+        "focus",
+        "disabled"
+      ],
+      "aria": [
+        {
+          "prop": null,
+          "attribute": "role=\"combobox\"",
+          "description": "Announces the combobox role for the SmartBox input."
+        },
+        {
+          "prop": null,
+          "attribute": "aria-expanded",
+          "description": "Indicates whether the suggestion popup is currently visible."
+        },
+        {
+          "prop": null,
+          "attribute": "aria-haspopup=\"listbox\"",
+          "description": "Indicates that the SmartBox has a popup listbox with suggestions."
+        },
+        {
+          "prop": null,
+          "attribute": "aria-hidden=\"true\"",
+          "description": "Decorative icons in the prefix area are hidden from screen readers."
+        },
+        {
+          "prop": null,
+          "attribute": "aria-label",
+          "description": "for the combobox input"
+        },
+        {
+          "prop": null,
+          "attribute": "aria-controls",
+          "description": "referencing the popup listbox ID"
+        },
+        {
+          "prop": null,
+          "attribute": "aria-activedescendant",
+          "description": "referencing the focused list item"
+        },
+        {
+          "prop": null,
+          "attribute": "aria-autocomplete",
+          "description": "behavior"
+        }
+      ],
+      "keyboard": [
+        {
+          "trigger": "ArrowDown",
+          "behavior": "Opens the suggestion popup if closed, or moves focus to the next suggestion in the list."
+        },
+        {
+          "trigger": "ArrowUp",
+          "behavior": "Opens the suggestion popup if closed, or moves focus to the previous suggestion in the list."
+        },
+        {
+          "trigger": "Enter",
+          "behavior": "Selects the currently highlighted suggestion (if any) and submits the input."
+        },
+        {
+          "trigger": "Escape",
+          "behavior": "Closes the suggestion popup if open, or clears the input field."
+        },
+        {
+          "trigger": "Home",
+          "behavior": "When the popup is open, moves focus to the first suggestion in the list."
+        },
+        {
+          "trigger": "End",
+          "behavior": "When the popup is open, moves focus to the last suggestion in the list."
+        },
+        {
+          "trigger": "Alt + ArrowDown",
+          "behavior": "Opens the suggestion popup (alternative method)."
+        },
+        {
+          "trigger": "Alt + ArrowUp",
+          "behavior": "Closes the suggestion popup (alternative method)."
+        },
+        {
+          "trigger": "Enter or Space",
+          "behavior": "Triggers a click action on the button (e.g., start voice input, send input, stop processing)."
+        },
+        {
+          "trigger": "ArrowDown",
+          "behavior": "Moves focus to the next suggestion in the list."
+        },
+        {
+          "trigger": "ArrowUp",
+          "behavior": "Moves focus to the previous suggestion in the list."
+        },
+        {
+          "trigger": "Home",
+          "behavior": "Moves focus to the first suggestion in the list."
+        },
+        {
+          "trigger": "End",
+          "behavior": "Moves focus to the last suggestion in the list."
+        },
+        {
+          "trigger": "Enter",
+          "behavior": "Selects the focused suggestion and closes the popup."
+        },
+        {
+          "trigger": "Escape",
+          "behavior": "Closes the popup and returns focus to the input field."
+        }
+      ],
+      "ux": [
+        {
+          "trigger": "Suggestions",
+          "behavior": "Displays context-aware suggestions as the user types."
+        },
+        {
+          "trigger": "Token creation",
+          "behavior": "Accepted suggestions are converted into inline tokens."
+        },
+        {
+          "trigger": "Natural language",
+          "behavior": "Parses free-form text input into structured filter criteria."
+        }
+      ]
+    },
+    {
+      "name": "SmartBoxSendButton",
+      "isPrimary": false,
+      "rootClass": "k-smart-box-send",
+      "options": [
+        {
+          "name": "size",
+          "values": [
+            "xsmall",
+            "small",
+            "medium",
+            "large"
+          ],
+          "default": null
+        },
+        {
+          "name": "rounded",
+          "values": [
+            "none",
+            "small",
+            "medium",
+            "large",
+            "full"
+          ],
+          "default": null
+        },
+        {
+          "name": "fillMode",
+          "values": [
+            "solid",
+            "flat",
+            "outline",
+            "clear",
+            "link"
+          ],
+          "default": null
+        },
+        {
+          "name": "themeColor",
+          "values": [
+            "base",
+            "primary",
+            "secondary",
+            "tertiary",
+            "success",
+            "warning",
+            "error",
+            "info",
+            "inverse"
+          ],
+          "default": null
+        }
+      ],
+      "states": [
+        "hover",
+        "focus",
+        "active",
+        "selected",
+        "disabled",
+        "generating"
+      ],
+      "aria": [],
+      "keyboard": [],
+      "ux": []
+    }
+  ],
+  "resources": [
+    {
+      "url": "https://www.w3.org/WAI/ARIA/apg/patterns/",
+      "text": "ARIA Authoring Practices Guide"
+    },
+    {
+      "url": "https://www.w3.org/WAI/ARIA/apg/patterns/combobox/",
+      "text": "ARIA Authoring Practices: Combobox Pattern"
+    }
+  ]
+}