@warp-ds/elements 2.9.1-next.5 → 2.9.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (118) hide show
  1. package/dist/custom-elements.json +25 -20
  2. package/dist/docs/slider/examples.md +30 -75
  3. package/dist/docs/slider/slider.md +30 -75
  4. package/dist/docs/step/api.md +11 -9
  5. package/dist/docs/step/step.md +11 -15
  6. package/dist/docs/step-indicator/api.md +4 -4
  7. package/dist/docs/step-indicator/examples.md +81 -0
  8. package/dist/docs/step-indicator/step-indicator.md +97 -6
  9. package/dist/docs/step-indicator/usage.md +12 -0
  10. package/dist/docs/switch/accessibility.md +2 -0
  11. package/dist/docs/switch/api.md +11 -17
  12. package/dist/docs/switch/examples.md +16 -0
  13. package/dist/docs/switch/switch.md +36 -18
  14. package/dist/docs/switch/usage.md +6 -0
  15. package/dist/index.d.ts +64 -56
  16. package/dist/packages/affix/affix.react.stories.d.ts +3 -1
  17. package/dist/packages/affix/affix.react.test.d.ts +1 -0
  18. package/dist/packages/affix/affix.react.test.js +3 -0
  19. package/dist/packages/affix/react.d.ts +4 -1
  20. package/dist/packages/affix/react.js +7 -1
  21. package/dist/packages/attention/attention.react.test.d.ts +1 -0
  22. package/dist/packages/attention/attention.react.test.js +8 -0
  23. package/dist/packages/attention/react.d.ts +2 -2
  24. package/dist/packages/attention/react.js +10 -1
  25. package/dist/packages/checkbox-group/checkbox-group.react.test.d.ts +1 -0
  26. package/dist/packages/checkbox-group/checkbox-group.react.test.js +5 -0
  27. package/dist/packages/checkbox-group/react.d.ts +4 -1
  28. package/dist/packages/checkbox-group/react.js +7 -1
  29. package/dist/packages/combobox/combobox.react.stories.d.ts +20 -8
  30. package/dist/packages/combobox/combobox.react.test.d.ts +1 -0
  31. package/dist/packages/combobox/combobox.react.test.js +9 -0
  32. package/dist/packages/combobox/react.d.ts +13 -6
  33. package/dist/packages/combobox/react.js +11 -1
  34. package/dist/packages/datepicker/datepicker.react.stories.d.ts +18 -10
  35. package/dist/packages/datepicker/datepicker.react.test.d.ts +1 -0
  36. package/dist/packages/datepicker/datepicker.react.test.js +7 -0
  37. package/dist/packages/datepicker/react.d.ts +13 -8
  38. package/dist/packages/datepicker/react.js +9 -1
  39. package/dist/packages/expandable/expandable.react.stories.d.ts +12 -2
  40. package/dist/packages/expandable/expandable.react.test.d.ts +1 -0
  41. package/dist/packages/expandable/expandable.react.test.js +8 -0
  42. package/dist/packages/expandable/react.d.ts +7 -1
  43. package/dist/packages/expandable/react.js +10 -1
  44. package/dist/packages/link/link.react.stories.d.ts +6 -2
  45. package/dist/packages/link/link.react.test.d.ts +1 -0
  46. package/dist/packages/link/link.react.test.js +3 -0
  47. package/dist/packages/link/react.d.ts +4 -1
  48. package/dist/packages/link/react.js +7 -1
  49. package/dist/packages/modal/modal.react.stories.d.ts +10 -6
  50. package/dist/packages/modal/modal.react.test.d.ts +1 -0
  51. package/dist/packages/modal/modal.react.test.js +6 -0
  52. package/dist/packages/modal/react.d.ts +10 -6
  53. package/dist/packages/modal/react.js +8 -1
  54. package/dist/packages/modal-header/modal-header.react.test.d.ts +1 -0
  55. package/dist/packages/modal-header/modal-header.react.test.js +3 -0
  56. package/dist/packages/modal-header/react.d.ts +7 -4
  57. package/dist/packages/modal-header/react.js +7 -1
  58. package/dist/packages/page-indicator/page-indicator.react.stories.d.ts +8 -2
  59. package/dist/packages/page-indicator/page-indicator.react.test.d.ts +1 -0
  60. package/dist/packages/page-indicator/page-indicator.react.test.js +6 -0
  61. package/dist/packages/page-indicator/react.d.ts +5 -1
  62. package/dist/packages/page-indicator/react.js +8 -1
  63. package/dist/packages/pagination/pagination.react.stories.d.ts +14 -6
  64. package/dist/packages/pagination/pagination.react.test.d.ts +1 -0
  65. package/dist/packages/pagination/pagination.react.test.js +7 -0
  66. package/dist/packages/pagination/react.d.ts +9 -4
  67. package/dist/packages/pagination/react.js +9 -1
  68. package/dist/packages/pill/pill.react.stories.d.ts +20 -8
  69. package/dist/packages/pill/pill.react.test.d.ts +1 -0
  70. package/dist/packages/pill/pill.react.test.js +9 -0
  71. package/dist/packages/pill/react.d.ts +13 -6
  72. package/dist/packages/pill/react.js +11 -1
  73. package/dist/packages/radio-group/radio-group.react.test.d.ts +1 -0
  74. package/dist/packages/radio-group/radio-group.react.test.js +5 -0
  75. package/dist/packages/radio-group/react.d.ts +9 -6
  76. package/dist/packages/radio-group/react.js +7 -1
  77. package/dist/packages/select/react.d.ts +9 -4
  78. package/dist/packages/select/react.js +9 -1
  79. package/dist/packages/select/select.react.stories.d.ts +14 -6
  80. package/dist/packages/select/select.react.test.d.ts +1 -0
  81. package/dist/packages/select/select.react.test.js +7 -0
  82. package/dist/packages/slider/react.d.ts +6 -1
  83. package/dist/packages/slider/react.js +9 -1
  84. package/dist/packages/slider/slider.react.stories.d.ts +6 -1
  85. package/dist/packages/slider/slider.react.test.d.ts +1 -0
  86. package/dist/packages/slider/slider.react.test.js +7 -0
  87. package/dist/packages/slider-thumb/react.d.ts +8 -5
  88. package/dist/packages/slider-thumb/react.js +8 -1
  89. package/dist/packages/slider-thumb/slider-thumb.react.test.d.ts +1 -0
  90. package/dist/packages/slider-thumb/slider-thumb.react.test.js +6 -0
  91. package/dist/packages/step/step.d.ts +8 -4
  92. package/dist/packages/step/step.js.map +2 -2
  93. package/dist/packages/step-indicator/step-indicator.d.ts +5 -6
  94. package/dist/packages/step-indicator/step-indicator.js.map +2 -2
  95. package/dist/packages/switch/switch.d.ts +21 -8
  96. package/dist/packages/switch/switch.js +1 -1
  97. package/dist/packages/switch/switch.js.map +2 -2
  98. package/dist/packages/tab/react.d.ts +9 -6
  99. package/dist/packages/tab/react.js +7 -1
  100. package/dist/packages/tab/tab.react.test.d.ts +1 -0
  101. package/dist/packages/tab/tab.react.test.js +3 -0
  102. package/dist/packages/textarea/react.d.ts +16 -10
  103. package/dist/packages/textarea/react.js +10 -1
  104. package/dist/packages/textarea/textarea.react.stories.d.ts +22 -12
  105. package/dist/packages/textarea/textarea.react.test.d.ts +1 -0
  106. package/dist/packages/textarea/textarea.react.test.js +8 -0
  107. package/dist/packages/textfield/react.d.ts +16 -10
  108. package/dist/packages/textfield/react.js +10 -1
  109. package/dist/packages/textfield/textfield.react.stories.d.ts +22 -12
  110. package/dist/packages/textfield/textfield.react.test.d.ts +1 -0
  111. package/dist/packages/textfield/textfield.react.test.js +8 -0
  112. package/dist/tests/react-ssr-attributes.d.ts +8 -0
  113. package/dist/tests/react-ssr-attributes.js +12 -0
  114. package/dist/web-types.json +73 -15
  115. package/package.json +1 -1
  116. package/dist/docs/step/accessibility.md +0 -1
  117. package/dist/docs/step/examples.md +0 -1
  118. package/dist/docs/step/usage.md +0 -1
@@ -1,3 +1,8 @@
1
+ import React from 'react';
1
2
  import { WarpSlider } from './slider.js';
2
3
  export { SliderThumb } from '../slider-thumb/react.js';
3
- export declare const Slider: import("@lit/react").ReactWebComponent<WarpSlider, {}>;
4
+ export declare const Slider: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpSlider>, "fieldset" | "label" | "disabled" | "invalid" | "helpText" | "max" | "min" | "required" | "step" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "render" | "renderOptions" | "suffix" | "error" | "openEnded" | "markers" | "valueFormatter" | "tooltipFormatter" | "labelFormatter" | "hiddenTextfield" | "_invalidMessage" | "_hasInternalError" | "_showError" | "_tabbableElements" | "edgeMin" | "edgeMax" | "componentHasError" | "errorText"> & {} & Partial<Omit<WarpSlider, keyof HTMLElement>> & React.RefAttributes<WarpSlider>, "ref">, "help-text" | "open-ended" | "hidden-textfield"> & {
5
+ openEnded?: boolean;
6
+ helpText?: string;
7
+ hiddenTextfield?: boolean;
8
+ } & React.RefAttributes<WarpSlider>>;
@@ -6,8 +6,16 @@ export { SliderThumb } from '../slider-thumb/react.js';
6
6
  // decouple from CDN by providing a dummy class
7
7
  class Component extends LitElement {
8
8
  }
9
- export const Slider = createComponent({
9
+ const BaseSlider = createComponent({
10
10
  tagName: 'w-slider',
11
11
  elementClass: Component,
12
12
  react: React,
13
13
  });
14
+ export const Slider = React.forwardRef(({ openEnded, helpText, hiddenTextfield, ...props }, ref) => React.createElement(BaseSlider, {
15
+ ...props,
16
+ ...(openEnded ? { 'open-ended': true } : {}),
17
+ ...(helpText !== undefined ? { 'help-text': helpText } : {}),
18
+ ...(hiddenTextfield ? { 'hidden-textfield': true } : {}),
19
+ ref,
20
+ }));
21
+ Slider.displayName = 'Slider';
@@ -1,8 +1,13 @@
1
1
  import { StoryObj } from '@storybook/react';
2
+ import React from 'react';
2
3
  import { Slider } from './react';
3
4
  declare const _default: {
4
5
  title: string;
5
- component: import("@lit/react").ReactWebComponent<import("./slider").WarpSlider, {}>;
6
+ component: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<import("./slider").WarpSlider>, "fieldset" | "label" | "disabled" | "invalid" | "helpText" | "max" | "min" | "required" | "step" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "render" | "renderOptions" | "suffix" | "error" | "openEnded" | "markers" | "valueFormatter" | "tooltipFormatter" | "labelFormatter" | "hiddenTextfield" | "_invalidMessage" | "_hasInternalError" | "_showError" | "_tabbableElements" | "edgeMin" | "edgeMax" | "componentHasError" | "errorText"> & {} & Partial<Omit<import("./slider").WarpSlider, keyof HTMLElement>> & React.RefAttributes<import("./slider").WarpSlider>, "ref">, "help-text" | "open-ended" | "hidden-textfield"> & {
7
+ openEnded?: boolean;
8
+ helpText?: string;
9
+ hiddenTextfield?: boolean;
10
+ } & React.RefAttributes<import("./slider").WarpSlider>>;
6
11
  };
7
12
  export default _default;
8
13
  export type Story = StoryObj<typeof Slider>;
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,7 @@
1
+ import { describeReactSsrAttributeMapping } from '../../tests/react-ssr-attributes';
2
+ import { Slider } from './react.js';
3
+ describeReactSsrAttributeMapping('Slider', Slider, [
4
+ { propName: 'openEnded', attrName: 'open-ended' },
5
+ { propName: 'helpText', attrName: 'help-text', value: 'Help text' },
6
+ { propName: 'hiddenTextfield', attrName: 'hidden-textfield' },
7
+ ]);
@@ -1,6 +1,9 @@
1
- import { EventName } from '@lit/react';
1
+ import React from 'react';
2
2
  import { WarpSliderThumb } from './slider-thumb.js';
3
- export declare const SliderThumb: import("@lit/react").ReactWebComponent<WarpSliderThumb, {
4
- onSliderValidity: EventName<CustomEvent>;
5
- 'onslider-validity': EventName<CustomEvent>;
6
- }>;
3
+ export declare const SliderThumb: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpSliderThumb>, "value" | "form" | "name" | "textfield" | "disabled" | "invalid" | "max" | "min" | "placeholder" | "required" | "step" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "suffix" | "range" | "openEnded" | "markers" | "valueFormatter" | "tooltipFormatter" | "labelFormatter" | "tooltipTarget" | "_showTooltip" | "_inputHasFocus" | "_hiddenTextfield" | "anchorPositioningStyleElement" | "updateFieldAfterValidation" | "boundaryValue" | "textFieldDisplayValue" | "tooltipDisplayValue" | "ariaDescriptionText" | "onSliderValidity" | "onslider-validity"> & {
4
+ onSliderValidity?: (e: CustomEvent<any>) => void;
5
+ 'onslider-validity'?: (e: CustomEvent<any>) => void;
6
+ } & Partial<Omit<WarpSliderThumb, keyof HTMLElement>> & React.RefAttributes<WarpSliderThumb>, "ref">, "aria-description" | "aria-label"> & {
7
+ ariaLabel?: string;
8
+ ariaDescription?: string;
9
+ } & React.RefAttributes<WarpSliderThumb>>;
@@ -4,7 +4,7 @@ import React from 'react';
4
4
  // decouple from CDN by providing a dummy class
5
5
  class Component extends LitElement {
6
6
  }
7
- export const SliderThumb = createComponent({
7
+ const BaseSliderThumb = createComponent({
8
8
  tagName: 'w-slider-thumb',
9
9
  elementClass: Component,
10
10
  react: React,
@@ -13,3 +13,10 @@ export const SliderThumb = createComponent({
13
13
  'onslider-validity': 'slidervalidity', // should be slider-validity
14
14
  },
15
15
  });
16
+ export const SliderThumb = React.forwardRef(({ ariaLabel, ariaDescription, ...props }, ref) => React.createElement(BaseSliderThumb, {
17
+ ...props,
18
+ ...(ariaLabel !== undefined ? { 'aria-label': ariaLabel } : {}),
19
+ ...(ariaDescription !== undefined ? { 'aria-description': ariaDescription } : {}),
20
+ ref,
21
+ }));
22
+ SliderThumb.displayName = 'SliderThumb';
@@ -0,0 +1,6 @@
1
+ import { describeReactSsrAttributeMapping } from '../../tests/react-ssr-attributes';
2
+ import { SliderThumb } from './react.js';
3
+ describeReactSsrAttributeMapping('SliderThumb', SliderThumb, [
4
+ { propName: 'ariaLabel', attrName: 'aria-label', value: 'Value' },
5
+ { propName: 'ariaDescription', attrName: 'aria-description', value: 'Description' },
6
+ ]);
@@ -8,16 +8,20 @@ export interface StepsContext {
8
8
  }
9
9
  /**
10
10
  * Individual step component that shows a single step in a process
11
+ *
12
+ * @parent w-step-indicator
11
13
  */
12
14
  export declare class WarpStep extends LitElement {
13
15
  /**
14
- * @summary
15
- * @description
16
+ * Whether this step is active.
17
+ *
18
+ * The active step displays a filled indicator.
16
19
  */
17
20
  active: boolean;
18
21
  /**
19
- * @summary
20
- * @description
22
+ * Whether this step is completed.
23
+ *
24
+ * Completed steps display a checkmark icon and a filled indicator.
21
25
  */
22
26
  completed: boolean;
23
27
  private _context;