@beeq/core 1.10.0-beta.0 → 1.10.0-beta.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.
- package/dist/beeq.html-custom-data.json +116 -116
- package/dist/custom-elements.json +1721 -1721
- package/package.json +1 -1
|
@@ -200,6 +200,18 @@
|
|
|
200
200
|
],
|
|
201
201
|
"references": []
|
|
202
202
|
},
|
|
203
|
+
{
|
|
204
|
+
"name": "bq-breadcrumb",
|
|
205
|
+
"description": "The Breadcrumb is used to wraps a series of breadcrumb items to indicate the current page's location within a navigational hierarchy.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-breadcrumb label=\"Breadcrumb\">\n<bq-breadcrumb-item>Home</bq-breadcrumb-item>\n<bq-breadcrumb-item>Men's clothing</bq-breadcrumb-item>\n<bq-breadcrumb-item>Shirt</bq-breadcrumb-item>\n<bq-breadcrumb-item>Casual shirts</bq-breadcrumb-item>\n</bq-breadcrumb>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - _default_ - The default slot is used to add `bq-breadcrumb-item` items to the breadcrumb.\n- **separator** - The slot to add a separator between breadcrumb items. Default separator is `/`.\n\n### **CSS Parts:**\n - **navigation** - The `nav` tag that loads the breadcrumb items\n- **separator** - The container that wraps the separator element",
|
|
206
|
+
"attributes": [
|
|
207
|
+
{
|
|
208
|
+
"name": "label",
|
|
209
|
+
"description": "The `aria-label` attribute to describe the type of navigation",
|
|
210
|
+
"values": []
|
|
211
|
+
}
|
|
212
|
+
],
|
|
213
|
+
"references": []
|
|
214
|
+
},
|
|
203
215
|
{
|
|
204
216
|
"name": "bq-breadcrumb-item",
|
|
205
217
|
"description": "The Breadcrumb Item helps users understand their current location within a website or application's hierarchical structure.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-breadcrumb-item label=\"Home page\">\n<bq-icon name=\"house-line\" size=\"16\"></bq-icon>\nHome\n</bq-breadcrumb-item>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqFocus** - Handler to be called when item is focused\n- **bqClick** - Handler to be called when item is clicked\n- **bqBlur** - Handler to be called when item loses focus\n- **bqBlur** - Handler to be called when item loses focus\n- **bqFocus** - Handler to be called when item is focused\n- **bqClick** - Handler to be called when item is clicked\n\n### **Slots:**\n - _default_ - The default slot is used to add content to the breadcrumb item.\n\n### **CSS Properties:**\n - **--bq-breadcrumb-item--background** - Background color of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--box-shadow** - Box shadow of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--border-color** - Border color of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--border-style** - Border style of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--border-width** - Border width of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--border-radius** - Border radius of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--line-height** - Line height of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--text-color** - Text color of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--text-color-current** - Text color of the current breadcrumb item (active) _(default: undefined)_\n- **--bq-breadcrumb-item--text-size** - Text size of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--text-size-separator** - Text size of the breadcrumb item separator _(default: undefined)_\n- **--bq-breadcrumb-item--padding-start** - Padding start of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--padding-end** - Padding end of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--paddingY** - Padding top and bottom of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--padding-start-separator** - Padding start of the breadcrumb item separator _(default: undefined)_\n- **--bq-breadcrumb-item--padding-end-separator** - Padding end of the breadcrumb item separator _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component wrapper container\n- **content** - The `span` tag that wraps the content item\n- **item** - The breadcrumb item wrapper (`button` or `a`)\n- **separator** - The `span` tag that wraps the separator element",
|
|
@@ -222,18 +234,6 @@
|
|
|
222
234
|
],
|
|
223
235
|
"references": []
|
|
224
236
|
},
|
|
225
|
-
{
|
|
226
|
-
"name": "bq-breadcrumb",
|
|
227
|
-
"description": "The Breadcrumb is used to wraps a series of breadcrumb items to indicate the current page's location within a navigational hierarchy.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-breadcrumb label=\"Breadcrumb\">\n<bq-breadcrumb-item>Home</bq-breadcrumb-item>\n<bq-breadcrumb-item>Men's clothing</bq-breadcrumb-item>\n<bq-breadcrumb-item>Shirt</bq-breadcrumb-item>\n<bq-breadcrumb-item>Casual shirts</bq-breadcrumb-item>\n</bq-breadcrumb>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - _default_ - The default slot is used to add `bq-breadcrumb-item` items to the breadcrumb.\n- **separator** - The slot to add a separator between breadcrumb items. Default separator is `/`.\n\n### **CSS Parts:**\n - **navigation** - The `nav` tag that loads the breadcrumb items\n- **separator** - The container that wraps the separator element",
|
|
228
|
-
"attributes": [
|
|
229
|
-
{
|
|
230
|
-
"name": "label",
|
|
231
|
-
"description": "The `aria-label` attribute to describe the type of navigation",
|
|
232
|
-
"values": []
|
|
233
|
-
}
|
|
234
|
-
],
|
|
235
|
-
"references": []
|
|
236
|
-
},
|
|
237
237
|
{
|
|
238
238
|
"name": "bq-button",
|
|
239
239
|
"description": "Buttons are designed for users to take action on a page or a screen.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-button appearance=\"primary\" border=\"m\" size=\"medium\">\n<bq-icon name=\"arrow-circle-left\" slot=\"prefix\"></bq-icon>\nGo back\n</bq-button>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqBlur** - Handler to be called when the button loses focus\n- **bqFocus** - Handler to be called when button gets focus\n- **bqClick** - Handler to be called when the button is clicked\n- **bqBlur** - Handler to be called when the button loses focus\n- **bqFocus** - Handler to be called when the button is clicked\n- **bqClick** - Handler to be called when button gets focus\n\n### **Slots:**\n - **prefix** - The prefix content to be displayed before the button label\n- _default_ - The button label content\n- **suffix** - The suffix content to be displayed after the button label\n\n### **CSS Properties:**\n - **--bq-button--border-color** - Button border color _(default: undefined)_\n- **--bq-button--border-radius** - Button border radius _(default: undefined)_\n- **--bq-button--border-style** - Button border style _(default: undefined)_\n- **--bq-button--border-width** - Button border width _(default: undefined)_\n- **--bq-button--small-height** - Button small height _(default: undefined)_\n- **--bq-button--small-paddingX** - Button small padding block (top and bottom) _(default: undefined)_\n- **--bq-button--small-paddingY** - Button small padding inline (left and right) _(default: undefined)_\n- **--bq-button--small-font-size** - Button small font size _(default: undefined)_\n- **--bq-button--medium-height** - Button medium height _(default: undefined)_\n- **--bq-button--medium-paddingX** - Button medium padding block (top and bottom) _(default: undefined)_\n- **--bq-button--medium-paddingY** - Button medium padding inline (left and right) _(default: undefined)_\n- **--bq-button--medium-font-size** - Button medium font size _(default: undefined)_\n- **--bq-button--large-height** - Button large height _(default: undefined)_\n- **--bq-button--large-paddingX** - Button large padding block (top and bottom) _(default: undefined)_\n- **--bq-button--large-paddingY** - Button large padding inline (left and right) _(default: undefined)_\n- **--bq-button--large-font-size** - Button large font size _(default: undefined)_\n\n### **CSS Parts:**\n - **button** - The `<a>` or `<button>` HTML element used under the hood.\n- **prefix** - The `<span>` tag element that acts as prefix container.\n- **label** - The `<span>` tag element that renders the text of the button.\n- **suffix** - The `<span>` tag element that acts as suffix container.",
|
|
@@ -576,66 +576,6 @@
|
|
|
576
576
|
],
|
|
577
577
|
"references": []
|
|
578
578
|
},
|
|
579
|
-
{
|
|
580
|
-
"name": "bq-divider",
|
|
581
|
-
"description": "The Divider component is used to visually separate content in a layout.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-divider orientation=\"horizontal\" stroke-color=\"stroke--primary\" title-alignment=\"middle\">\n<span slot=\"title\">Divider Title</span>\n</bq-divider>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - _default_ - The title content of the divider.\n\n### **CSS Properties:**\n - **--bq-divider--color** - Divider color _(default: undefined)_\n- **--bq-divider--title-marginX** - Divider space between title and delimiters _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **dash-start** - The component's internal svg wrapper for the start line of the divider's stroke.\n- **dash-end** - The component's internal svg wrapper for the end line of the divider's stroke.\n- **dash-start-line** - The component's internal line component of the divider's stroke.\n- **dash-end-line** - The component's internal line component of the divider's stroke.",
|
|
582
|
-
"attributes": [
|
|
583
|
-
{
|
|
584
|
-
"name": "dashed",
|
|
585
|
-
"description": "If true, the divider has a dashed pattern.",
|
|
586
|
-
"values": []
|
|
587
|
-
},
|
|
588
|
-
{
|
|
589
|
-
"name": "orientation",
|
|
590
|
-
"description": "The default orientation of the divider.",
|
|
591
|
-
"values": [{ "name": "horizontal" }, { "name": "vertical" }]
|
|
592
|
-
},
|
|
593
|
-
{
|
|
594
|
-
"name": "stroke-color",
|
|
595
|
-
"description": "Set the stroke color of the divider. The value should be a valid value of the palette color.",
|
|
596
|
-
"values": []
|
|
597
|
-
},
|
|
598
|
-
{
|
|
599
|
-
"name": "title-alignment",
|
|
600
|
-
"description": "Set the alignment of the title on the main axis of the divider (horizontal / vertical).",
|
|
601
|
-
"values": [
|
|
602
|
-
{ "name": "start" },
|
|
603
|
-
{ "name": "middle" },
|
|
604
|
-
{ "name": "end" }
|
|
605
|
-
]
|
|
606
|
-
},
|
|
607
|
-
{
|
|
608
|
-
"name": "stroke-dash-width",
|
|
609
|
-
"description": "Set the width of each dash of the divider's stroke. This is applicable when the stroke is dashed.",
|
|
610
|
-
"values": []
|
|
611
|
-
},
|
|
612
|
-
{
|
|
613
|
-
"name": "stroke-dash-gap",
|
|
614
|
-
"description": "Set the gap of the divider's stroke. This is applicable when the stroke is dashed.",
|
|
615
|
-
"values": []
|
|
616
|
-
},
|
|
617
|
-
{
|
|
618
|
-
"name": "stroke-thickness",
|
|
619
|
-
"description": "Set the thickness of the divider's stroke. Value expressed in px.",
|
|
620
|
-
"values": []
|
|
621
|
-
},
|
|
622
|
-
{
|
|
623
|
-
"name": "stroke-basis",
|
|
624
|
-
"description": "Set the min width of the divider's stroke when text is not centered. Value expressed in px.",
|
|
625
|
-
"values": []
|
|
626
|
-
},
|
|
627
|
-
{
|
|
628
|
-
"name": "stroke-linecap",
|
|
629
|
-
"description": "Set the line of the divider's stroke. This is applicable when the stroke is dashed.",
|
|
630
|
-
"values": [
|
|
631
|
-
{ "name": "square" },
|
|
632
|
-
{ "name": "round" },
|
|
633
|
-
{ "name": "butt" }
|
|
634
|
-
]
|
|
635
|
-
}
|
|
636
|
-
],
|
|
637
|
-
"references": []
|
|
638
|
-
},
|
|
639
579
|
{
|
|
640
580
|
"name": "bq-dialog",
|
|
641
581
|
"description": "The Dialog component is used to display additional content or prompt a user for action.\nIt provides a way to display additional information, options, or controls in a separate, non-obstructive interface element.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-dialog footer-appearance=\"standard\" border=\"m\" size=\"medium\">\n<h5 class=\"bold flex items-center gap-s\" slot=\"title\">\n<bq-icon name=\"info\" size=\"30\" color=\"text--accent\" role=\"img\" title=\"Info\"></bq-icon>\nTitle\n</h5>\n<p>\nLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's\nstandard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a\ntype specimen book.\n</p>\n<div class=\"flex gap-xs\" slot=\"footer\">\n<bq-button appearance=\"link\">Button</bq-button>\n<bq-button variant=\"ghost\">Button</bq-button>\n<bq-button variant=\"standard\" slot=\"footer\">Button</bq-button>\n</div>\n</bq-dialog>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqCancel** - Callback handler emitted when the dialog has been canceled or dismissed.\n- **bqClose** - Callback handler emitted when the dialog will close.\n- **bqOpen** - Callback handler emitted when the dialog will open.\n- **bqAfterOpen** - Callback handler emitted when the dialog finish opening.\n- **bqAfterClose** - Callback handler emitted when the dialog finish closing.\n- **bqCancel** - Callback handler emitted when the dialog has been canceled or dismissed\n- **bqClose** - Callback handler emitted when the dialog will close\n- **bqOpen** - Callback handler emitted when the dialog will open\n- **bqAfterOpen** - Callback handler emitted when the dialog finish opening\n- **bqAfterClose** - Callback handler emitted when the dialog finish closing\n\n### **Methods:**\n - **show()** - Open the dialog\n- **hide()** - Closes the dialog\n- **cancel()** - Dismiss or cancel the dialog\n\n### **Slots:**\n - **title** - The title content of the dialog.\n- _default_ - The body content of the dialog.\n- **footer** - The footer content of the dialog.\n- **button-close** - The close button content of the dialog.\n\n### **CSS Properties:**\n - **--bq-dialog--background** - Dialog background color _(default: undefined)_\n- **--bq-dialog--background-backdrop** - Dialog backdrop background color _(default: undefined)_\n- **--bq-dialog--box-shadow** - Dialog box shadow _(default: undefined)_\n- **--bq-dialog--border-color** - Dialog border color _(default: undefined)_\n- **--bq-dialog--border-style** - Dialog border style _(default: undefined)_\n- **--bq-dialog--border-width** - Dialog border width _(default: undefined)_\n- **--bq-dialog--border-radius** - Dialog border radius _(default: undefined)_\n- **--bq-dialog--padding** - Dialog padding _(default: undefined)_\n- **--bq-dialog--content-footer-gap** - Dialog gap distance between content and footer elements _(default: undefined)_\n- **--bq-dialog--title-body-gap** - Dialog gap distance between title and body elements _(default: undefined)_\n- **--bq-dialog--width-small** - Dialog small width _(default: undefined)_\n- **--bq-dialog--width-medium** - Dialog medium width _(default: undefined)_\n- **--bq-dialog--width-large** - Dialog large width _(default: undefined)_\n- **--bq-dialog-z-index** - Dialog z-index applied when opened _(default: undefined)_\n\n### **CSS Parts:**\n - **body** - The `<main>` that holds the dialog body content.\n- **button-close** - The button that closes the dialog on click.\n- **content** - The `<div>` container that holds the dialog title and body content.\n- **dialog** - The `<dialog>` wrapper container inside the shadow DOM.\n- **footer** - The `<footer>` that holds footer content.\n- **header** - The `<header>` that holds the icon, title, description and close button.\n- **title** - The `<div>` that holds the title content.",
|
|
@@ -696,35 +636,62 @@
|
|
|
696
636
|
"references": []
|
|
697
637
|
},
|
|
698
638
|
{
|
|
699
|
-
"name": "bq-
|
|
700
|
-
"description": "The
|
|
639
|
+
"name": "bq-divider",
|
|
640
|
+
"description": "The Divider component is used to visually separate content in a layout.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-divider orientation=\"horizontal\" stroke-color=\"stroke--primary\" title-alignment=\"middle\">\n<span slot=\"title\">Divider Title</span>\n</bq-divider>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - _default_ - The title content of the divider.\n\n### **CSS Properties:**\n - **--bq-divider--color** - Divider color _(default: undefined)_\n- **--bq-divider--title-marginX** - Divider space between title and delimiters _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **dash-start** - The component's internal svg wrapper for the start line of the divider's stroke.\n- **dash-end** - The component's internal svg wrapper for the end line of the divider's stroke.\n- **dash-start-line** - The component's internal line component of the divider's stroke.\n- **dash-end-line** - The component's internal line component of the divider's stroke.",
|
|
701
641
|
"attributes": [
|
|
702
642
|
{
|
|
703
|
-
"name": "
|
|
704
|
-
"description": "If true, the
|
|
643
|
+
"name": "dashed",
|
|
644
|
+
"description": "If true, the divider has a dashed pattern.",
|
|
705
645
|
"values": []
|
|
706
646
|
},
|
|
707
647
|
{
|
|
708
|
-
"name": "
|
|
709
|
-
"description": "
|
|
648
|
+
"name": "orientation",
|
|
649
|
+
"description": "The default orientation of the divider.",
|
|
650
|
+
"values": [{ "name": "horizontal" }, { "name": "vertical" }]
|
|
651
|
+
},
|
|
652
|
+
{
|
|
653
|
+
"name": "stroke-color",
|
|
654
|
+
"description": "Set the stroke color of the divider. The value should be a valid value of the palette color.",
|
|
710
655
|
"values": []
|
|
711
656
|
},
|
|
712
657
|
{
|
|
713
|
-
"name": "
|
|
714
|
-
"description": "
|
|
658
|
+
"name": "title-alignment",
|
|
659
|
+
"description": "Set the alignment of the title on the main axis of the divider (horizontal / vertical).",
|
|
660
|
+
"values": [
|
|
661
|
+
{ "name": "start" },
|
|
662
|
+
{ "name": "middle" },
|
|
663
|
+
{ "name": "end" }
|
|
664
|
+
]
|
|
665
|
+
},
|
|
666
|
+
{
|
|
667
|
+
"name": "stroke-dash-width",
|
|
668
|
+
"description": "Set the width of each dash of the divider's stroke. This is applicable when the stroke is dashed.",
|
|
715
669
|
"values": []
|
|
716
670
|
},
|
|
717
671
|
{
|
|
718
|
-
"name": "
|
|
719
|
-
"description": "
|
|
672
|
+
"name": "stroke-dash-gap",
|
|
673
|
+
"description": "Set the gap of the divider's stroke. This is applicable when the stroke is dashed.",
|
|
720
674
|
"values": []
|
|
721
675
|
},
|
|
722
676
|
{
|
|
723
|
-
"name": "
|
|
724
|
-
"description": "
|
|
725
|
-
"values": [
|
|
677
|
+
"name": "stroke-thickness",
|
|
678
|
+
"description": "Set the thickness of the divider's stroke. Value expressed in px.",
|
|
679
|
+
"values": []
|
|
726
680
|
},
|
|
727
|
-
{
|
|
681
|
+
{
|
|
682
|
+
"name": "stroke-basis",
|
|
683
|
+
"description": "Set the min width of the divider's stroke when text is not centered. Value expressed in px.",
|
|
684
|
+
"values": []
|
|
685
|
+
},
|
|
686
|
+
{
|
|
687
|
+
"name": "stroke-linecap",
|
|
688
|
+
"description": "Set the line of the divider's stroke. This is applicable when the stroke is dashed.",
|
|
689
|
+
"values": [
|
|
690
|
+
{ "name": "square" },
|
|
691
|
+
{ "name": "round" },
|
|
692
|
+
{ "name": "butt" }
|
|
693
|
+
]
|
|
694
|
+
}
|
|
728
695
|
],
|
|
729
696
|
"references": []
|
|
730
697
|
},
|
|
@@ -794,6 +761,39 @@
|
|
|
794
761
|
],
|
|
795
762
|
"references": []
|
|
796
763
|
},
|
|
764
|
+
{
|
|
765
|
+
"name": "bq-drawer",
|
|
766
|
+
"description": "The Drawer component provides a sliding panel interface commonly used for navigation or presenting additional content without taking up significant screen space.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-drawer position=\"end\">\n<div class=\"flex gap-xs\" slot=\"title\">Title</div>\n<div class=\"...\">\nContent\n</div>\n<div class=\"flex flex-1 justify-center gap-xs\" slot=\"footer\">\n<bq-button appearance=\"primary\" block=\"\" size=\"small\">Button</bq-button>\n<bq-button appearance=\"link\" block=\"\" size=\"small\">Button</bq-button>\n</div>\n</bq-drawer>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqClose** - Callback handler to be called when the drawer is closed.\n- **bqOpen** - Callback handler to be called when the drawer is opened.\n- **bqAfterOpen** - Callback handler to be called after the drawer has been opened.\n- **bqAfterClose** - Callback handler to be called after the drawer has been closed.\n- **bqClose** - Callback handler to be called when the drawer is closed\n- **bqOpen** - Callback handler to be called when the drawer is opened\n- **bqAfterOpen** - Callback handler to be called after the drawer has been opened\n- **bqAfterClose** - Callback handler to be called after the drawer has been closed\n\n### **Methods:**\n - **handlePlacementChange()** - !TO BE REMOVED: Delete this `@Watch()` once the deprecated `placement` property is removed\nWe need to maintain retro-compatibility with the deprecated `placement` property\n- **hide(): _Promise<void>_** - Method to be called to hide the drawer component\n- **show(): _Promise<void>_** - Method to be called to show the drawer component\n\n### **Slots:**\n - **title** - The title content of the drawer.\n- _default_ - The body content of the drawer.\n- **footer** - The footer content of the drawer.\n- **button-close** - The close button content of the drawer.\n- **footer-divider** - The footer divider content of the drawer.\n\n### **CSS Properties:**\n - **--bq-drawer--backgroundBackdrop** - Background color of the backdrop _(default: undefined)_\n- **--bq-drawer--gap** - Gap between the drawer and the viewport _(default: undefined)_\n- **--bq-drawer--width** - Width of the drawer _(default: undefined)_\n- **--bq-drawer--paddingX** - Padding left and right of the drawer _(default: undefined)_\n- **--bq-drawer--paddingY** - Padding top and bottom of the drawer _(default: undefined)_\n- **--bq-drawer--zIndex** - Z-index of the drawer component _(default: undefined)_\n\n### **CSS Parts:**\n - **backdrop** - The `<div>` that holds the backdrop overlay.\n- **button-close** - The BqButton that closes the drawer.\n- **button-close__btn** - The native button used under the hood that closes the drawer.\n- **button-close__label** - The text inside the native button that closes the drawer.\n- **panel** - The `<div>` that holds the drawer entire content.\n- **header** - The `<header>` that holds the icon, title, and close button.\n- **title** - The `<div>` that holds the title content.\n- **body** - The `<main>` that holds the drawer body content.\n- **footer** - The `<footer>` that holds footer content.",
|
|
767
|
+
"attributes": [
|
|
768
|
+
{
|
|
769
|
+
"name": "enable-backdrop",
|
|
770
|
+
"description": "If true, the backdrop overlay will be shown when the drawer opens.",
|
|
771
|
+
"values": []
|
|
772
|
+
},
|
|
773
|
+
{
|
|
774
|
+
"name": "close-on-click-outside",
|
|
775
|
+
"description": "If true, the drawer will not close when clicking outside the panel.",
|
|
776
|
+
"values": []
|
|
777
|
+
},
|
|
778
|
+
{
|
|
779
|
+
"name": "close-on-esc",
|
|
780
|
+
"description": "If true, the drawer will not close when the [Esc] key is pressed.",
|
|
781
|
+
"values": []
|
|
782
|
+
},
|
|
783
|
+
{
|
|
784
|
+
"name": "open",
|
|
785
|
+
"description": "If true, the drawer component will be shown.",
|
|
786
|
+
"values": []
|
|
787
|
+
},
|
|
788
|
+
{
|
|
789
|
+
"name": "position",
|
|
790
|
+
"description": "Defines the position of the drawer.",
|
|
791
|
+
"values": [{ "name": "start" }, { "name": "end" }]
|
|
792
|
+
},
|
|
793
|
+
{ "name": "placement", "values": [{ "name": "TDrawerPlacement" }] }
|
|
794
|
+
],
|
|
795
|
+
"references": []
|
|
796
|
+
},
|
|
797
797
|
{
|
|
798
798
|
"name": "bq-empty-state",
|
|
799
799
|
"description": "An Empty State is a UI component displayed when there is no data or content available, often used in dynamic or inactive application states.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-empty-state size=\"medium\">Title</bq-empty-state>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - **thumbnail** - The element that wraps the thumbnail element\n- **body** - The content to be displayed after the thumbnail section\n- **footer** - The content to be displayed after the body section as footer\n\n### **CSS Parts:**\n - **body** - The container `<div>` that wraps the alert description content\n- **footer** - The container `<div>` that wraps the alert footer content\n- **icon** - The `<bq-icon>` element used to render a predefined icon size based on the empty state size (small, medium, large)\n- **thumbnail** - The container `<div>` that wraps the thumbnail element\n- **title** - The container `<div>` that wraps the empty state title content\n- **wrapper** - The wrapper container `<div>` of the element inside the shadow DOM",
|
|
@@ -1013,12 +1013,6 @@
|
|
|
1013
1013
|
],
|
|
1014
1014
|
"references": []
|
|
1015
1015
|
},
|
|
1016
|
-
{
|
|
1017
|
-
"name": "bq-option-group",
|
|
1018
|
-
"description": "The option group component is a container for multiple option elements.\nIt allows to manage the appearance and size of all options at once.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-option-group class=\"hydrated\">\n<span slot=\"header-label\">Sport</span>\n<bq-option value=\"football\">Football</bq-option>\n<bq-option value=\"basketball\">Basketball</bq-option>\n<bq-option value=\"tennis\">Tennis</bq-option>\n</bq-option-group>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - **header-label** - The label of the option group\n- **header-prefix** - The prefix of the label\n- **header-suffix** - The suffix of the label\n- _default_ - The option items\n\n### **CSS Properties:**\n - **--bq-option-group--background** - option group background color _(default: undefined)_\n- **--bq-option-group--font-size** - option group font size _(default: undefined)_\n- **--bq-option-group--line-height** - option group line height _(default: undefined)_\n- **--bq-option-group--label-padding-start** - option group header padding start _(default: undefined)_\n- **--bq-option-group--label-padding-end** - option group header padding start _(default: undefined)_\n- **--bq-option-group--label-paddingY** - option group header padding Y axis _(default: undefined)_\n- **--bq-option-group--label-text-padding-start** - option group text within label padding start _(default: undefined)_\n- **--bq-option-group--label-text-padding-end** - option group text within label padding start _(default: undefined)_\n- **--bq-option-group--container-padding-start** - option group container padding start _(default: undefined)_\n\n### **CSS Parts:**\n - **label** - The `legend` tag element which acts as a container for the label\n- **prefix** - The prefix of the label\n- **label** - The text of the label\n- **suffix** - The suffix of the label\n- **group** - The `div` element which holds the option items",
|
|
1019
|
-
"attributes": [],
|
|
1020
|
-
"references": []
|
|
1021
|
-
},
|
|
1022
1016
|
{
|
|
1023
1017
|
"name": "bq-option",
|
|
1024
1018
|
"description": "An option refers to a specific choice that appears in a list of selectable items that can be opened or closed by the user.\nIt can be an element of the navigation system that allows users to select different sections or pages within an application or it can be used within a dropdown list.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-option value=\"user\">\n<span>User profile</span>\n<bq-icon slot=\"suffix\" name=\"user\"></bq-icon>\n</bq-option>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqBlur** - Handler to be called when item loses focus.\n- **bqFocus** - Handler to be called when item is focused.\n- **bqClick** - Handler to be called when item is clicked.\n- **bqEnter** - Handler to be called on enter key press.\n- **bqBlur** - Handler to be called when item loses focus\n- **bqFocus** - Handler to be called when item is focused\n- **bqClick** - Handler to be called when item is clicked\n- **bqEnter** - Handler to be called on enter key press\n\n### **Slots:**\n - **prefix** - The prefix content to be displayed before the label.\n- _default_ - The label content to be displayed.\n\n### **CSS Properties:**\n - **--bq-option--background** - background color _(default: undefined)_\n- **--bq-option--font-size** - font size _(default: undefined)_\n- **--bq-option--border-color** - border color _(default: undefined)_\n- **--bq-option--border-style** - border style _(default: undefined)_\n- **--bq-option--border-width** - border width _(default: undefined)_\n- **--bq-option--border-radius** - border radius _(default: undefined)_\n- **--bq-option--box-shadow** - box shadow _(default: undefined)_\n- **--bq-option--gap-start** - gap space between prefix and label _(default: undefined)_\n- **--bq-option--gap-end** - gap space between label and suffix _(default: undefined)_\n- **--bq-option--paddingY** - padding Y axis _(default: undefined)_\n- **--bq-option--padding-start** - option label padding start _(default: undefined)_\n- **--bq-option--padding-end** - option label padding end _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **label** - The `span` element in which the label text is displayed.\n- **prefix** - The `span` element in which the prefix is displayed (generally `bq-icon`).\n- **suffix** - The `span` element in which the suffix is displayed (generally `bq-icon`).",
|
|
@@ -1046,6 +1040,12 @@
|
|
|
1046
1040
|
],
|
|
1047
1041
|
"references": []
|
|
1048
1042
|
},
|
|
1043
|
+
{
|
|
1044
|
+
"name": "bq-option-group",
|
|
1045
|
+
"description": "The option group component is a container for multiple option elements.\nIt allows to manage the appearance and size of all options at once.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-option-group class=\"hydrated\">\n<span slot=\"header-label\">Sport</span>\n<bq-option value=\"football\">Football</bq-option>\n<bq-option value=\"basketball\">Basketball</bq-option>\n<bq-option value=\"tennis\">Tennis</bq-option>\n</bq-option-group>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - **header-label** - The label of the option group\n- **header-prefix** - The prefix of the label\n- **header-suffix** - The suffix of the label\n- _default_ - The option items\n\n### **CSS Properties:**\n - **--bq-option-group--background** - option group background color _(default: undefined)_\n- **--bq-option-group--font-size** - option group font size _(default: undefined)_\n- **--bq-option-group--line-height** - option group line height _(default: undefined)_\n- **--bq-option-group--label-padding-start** - option group header padding start _(default: undefined)_\n- **--bq-option-group--label-padding-end** - option group header padding start _(default: undefined)_\n- **--bq-option-group--label-paddingY** - option group header padding Y axis _(default: undefined)_\n- **--bq-option-group--label-text-padding-start** - option group text within label padding start _(default: undefined)_\n- **--bq-option-group--label-text-padding-end** - option group text within label padding start _(default: undefined)_\n- **--bq-option-group--container-padding-start** - option group container padding start _(default: undefined)_\n\n### **CSS Parts:**\n - **label** - The `legend` tag element which acts as a container for the label\n- **prefix** - The prefix of the label\n- **label** - The text of the label\n- **suffix** - The suffix of the label\n- **group** - The `div` element which holds the option items",
|
|
1046
|
+
"attributes": [],
|
|
1047
|
+
"references": []
|
|
1048
|
+
},
|
|
1049
1049
|
{
|
|
1050
1050
|
"name": "bq-option-list",
|
|
1051
1051
|
"description": "The option list component is a container for multiple option elements.\nIt allows to manage the appearance and size of all options at once.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-option-list>\n<bq-option value=\"football\">Football</bq-option>\n<bq-option value=\"basketball\">Basketball</bq-option>\n<bq-option value=\"tennis\">Tennis</bq-option>\n</bq-option-list>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqSelect** - Handler to be called when `bq-option` is selected (on click/enter press).\n\n### **Slots:**\n - _default_ - The option items\n\n### **CSS Properties:**\n - **--bq-option-group--gapY-list** - Option group gap between items Y axis _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
|
|
@@ -1058,12 +1058,6 @@
|
|
|
1058
1058
|
],
|
|
1059
1059
|
"references": []
|
|
1060
1060
|
},
|
|
1061
|
-
{
|
|
1062
|
-
"name": "bq-page-title",
|
|
1063
|
-
"description": "The Page Title component is a versatile and essential element used to display the main title of a page or section within an application.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-page-title>\n<bq-button appearance=\"link\" slot=\"back\">\n<bq-icon\ncolor=\"text--primary\"\nname=\"arrow-left\"\nweight=\"bold\"\nrole=\"img\"\ntitle=\"Navigate back to the previous page\"\n></bq-icon>\n</bq-button>\nTitle\n<div slot=\"sub-title\">Sub-title</div>\n</bq-page-title>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - **back** - The back navigation button.\n- _default_ - The main title content.\n- **sub-title** - The sub-title content.\n- **suffix** - The suffix content.\n\n### **CSS Properties:**\n - **--paddingY** - Padding top and bottom of the page title wrapper _(default: undefined)_\n- **--subtitle-borderBlockEnd** - Page title border end color _(default: undefined)_\n- **--subtitle-fontWeight** - Page title font weight for subtitle _(default: undefined)_\n- **--subtitle-textColor** - Page title color for sub-title _(default: undefined)_\n- **--subtitle-textSize** - Page title text size for subtitle _(default: undefined)_\n- **--title-fontWeight** - Page title font weight for title _(default: undefined)_\n- **--title-lineHeight** - Page title text line height _(default: undefined)_\n- **--title-textColor** - Page title color for title _(default: undefined)_\n- **--title-textSize** - Page title text size for title _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The inner container `<div>`of element that contains the base page title component.\n- **content** - Defines the main container of the page title component, which includes the title and subtitle elements.\n- **title-suffix** - Defines the container that holds the title and any suffix content.\n- **back** - The container `<div>` page title element that acts as back slot container.\n- **title** - The `<h1>` element serves as a container for the page title content, to improve accessibility.\n- **suffix** - The `<div>` page title element that acts as suffix slot container.\n- **sub-title** - The `<div>` page title element that acts as sub-title slot container.",
|
|
1064
|
-
"attributes": [],
|
|
1065
|
-
"references": []
|
|
1066
|
-
},
|
|
1067
1061
|
{
|
|
1068
1062
|
"name": "bq-panel",
|
|
1069
1063
|
"description": "The Panel component is a versatile and essential element used to wrap and display content in a floating panel.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-panel open>\n<div>Panel content</div>\n</bq-panel>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - _default_ - The content of the panel.\n\n### **CSS Parts:**\n - **panel** - The `<div>` element used to display and style the panel",
|
|
@@ -1115,6 +1109,12 @@
|
|
|
1115
1109
|
],
|
|
1116
1110
|
"references": []
|
|
1117
1111
|
},
|
|
1112
|
+
{
|
|
1113
|
+
"name": "bq-page-title",
|
|
1114
|
+
"description": "The Page Title component is a versatile and essential element used to display the main title of a page or section within an application.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-page-title>\n<bq-button appearance=\"link\" slot=\"back\">\n<bq-icon\ncolor=\"text--primary\"\nname=\"arrow-left\"\nweight=\"bold\"\nrole=\"img\"\ntitle=\"Navigate back to the previous page\"\n></bq-icon>\n</bq-button>\nTitle\n<div slot=\"sub-title\">Sub-title</div>\n</bq-page-title>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - **back** - The back navigation button.\n- _default_ - The main title content.\n- **sub-title** - The sub-title content.\n- **suffix** - The suffix content.\n\n### **CSS Properties:**\n - **--paddingY** - Padding top and bottom of the page title wrapper _(default: undefined)_\n- **--subtitle-borderBlockEnd** - Page title border end color _(default: undefined)_\n- **--subtitle-fontWeight** - Page title font weight for subtitle _(default: undefined)_\n- **--subtitle-textColor** - Page title color for sub-title _(default: undefined)_\n- **--subtitle-textSize** - Page title text size for subtitle _(default: undefined)_\n- **--title-fontWeight** - Page title font weight for title _(default: undefined)_\n- **--title-lineHeight** - Page title text line height _(default: undefined)_\n- **--title-textColor** - Page title color for title _(default: undefined)_\n- **--title-textSize** - Page title text size for title _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The inner container `<div>`of element that contains the base page title component.\n- **content** - Defines the main container of the page title component, which includes the title and subtitle elements.\n- **title-suffix** - Defines the container that holds the title and any suffix content.\n- **back** - The container `<div>` page title element that acts as back slot container.\n- **title** - The `<h1>` element serves as a container for the page title content, to improve accessibility.\n- **suffix** - The `<div>` page title element that acts as suffix slot container.\n- **sub-title** - The `<div>` page title element that acts as sub-title slot container.",
|
|
1115
|
+
"attributes": [],
|
|
1116
|
+
"references": []
|
|
1117
|
+
},
|
|
1118
1118
|
{
|
|
1119
1119
|
"name": "bq-progress",
|
|
1120
1120
|
"description": "The progress bar is a user interface component that visually represents the completion status of a task or process.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-progress value=\"50\"></bq-progress>\n```\n\n</figure>\n---\n\n\n### **CSS Properties:**\n - **--bq-progress-bar--height** - The progress bars height _(default: undefined)_\n- **--bq-progress-bar--indeterminateWidth** - The progress bar width when its indeterminate _(default: undefined)_\n- **--bq-progress-bar--indicatorColor** - The progress bar color (inside the track area) _(default: undefined)_\n- **--bq-progress-bar--trackColor** - The progress bar track area (the grey one) _(default: undefined)_\n\n### **CSS Parts:**\n - **wrapper** - The component wrapper container inside the shadow DOM\n- **progress** - The `<div>` container that holds the native progress element\n- **progress-bar** - The native html for progress element\n- **label** - The `<div>` container that holds the label value (in percentage)\n- **indeterminate** - The `<div>` container that holds the indeterminate progress bar\n- **base** - The base container for the tooltip component inside the shadow DOM when hovering over the progress bar\n- **trigger** - The container holding the element that triggers the tooltip display when hovering over the progress bar\n- **panel** - The container holding the content of the tooltip when hovering over the progress bar",
|
|
@@ -1542,24 +1542,6 @@
|
|
|
1542
1542
|
],
|
|
1543
1543
|
"references": []
|
|
1544
1544
|
},
|
|
1545
|
-
{
|
|
1546
|
-
"name": "bq-status",
|
|
1547
|
-
"description": "The Status Component is a UI element that represents the current state or condition of an item, task, or process.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-status type=\"alert\">Alert status</bq-status>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - **The** - content of the status component.\n\n### **CSS Properties:**\n - **--bq-status-circ** - Status circle size. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper of the status component.\n- **circle** - The colored circle that marks the status type.\n- **text** - The `<div>` container that holds the text label of the status component.",
|
|
1548
|
-
"attributes": [
|
|
1549
|
-
{
|
|
1550
|
-
"name": "type",
|
|
1551
|
-
"description": "It defines the type of status to display.",
|
|
1552
|
-
"values": [
|
|
1553
|
-
{ "name": "alert" },
|
|
1554
|
-
{ "name": "danger" },
|
|
1555
|
-
{ "name": "info" },
|
|
1556
|
-
{ "name": "neutral" },
|
|
1557
|
-
{ "name": "success" }
|
|
1558
|
-
]
|
|
1559
|
-
}
|
|
1560
|
-
],
|
|
1561
|
-
"references": []
|
|
1562
|
-
},
|
|
1563
1545
|
{
|
|
1564
1546
|
"name": "bq-step-item",
|
|
1565
1547
|
"description": "The Step Item Component is a UI element used to display a single step or stage in a process or task.\nIt should be used inside the Steps component.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-step-item status=\"completed\">\n<bq-icon slot=\"prefix\" name=\"check-circle\"></bq-icon>\n<span>Title</span>\n<span slot=\"description\">Description</span>\n</bq-step-item>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqClick** - Callback handler emitted when the step item is clicked\n- **bqClick** - Callback handler emitted when the step item is clicked\n\n### **Slots:**\n - _default_ - The step item content\n- **prefix** - The step item prefix\n- **description** - The step item description\n\n### **CSS Properties:**\n - **--bq-step-item--prefix-color** - Color of the prefix icon _(default: undefined)_\n- **--bq-step-item--prefix-color-current** - Color of the prefix icon when current _(default: undefined)_\n- **--bq-step-item--prefix-color-completed** - Color of the prefix icon when completed _(default: undefined)_\n- **--bq-step-item--prefix-color-error** - Color of the prefix icon when error _(default: undefined)_\n- **--bq-step-item--prefix-num-size** - Size of the prefix number _(default: undefined)_\n- **--bq-step-item--prefix-num-bg-color** - Background color of the prefix number _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **title** - The component's title.\n- **description** - The component's description.",
|
|
@@ -1592,6 +1574,24 @@
|
|
|
1592
1574
|
],
|
|
1593
1575
|
"references": []
|
|
1594
1576
|
},
|
|
1577
|
+
{
|
|
1578
|
+
"name": "bq-status",
|
|
1579
|
+
"description": "The Status Component is a UI element that represents the current state or condition of an item, task, or process.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-status type=\"alert\">Alert status</bq-status>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - **The** - content of the status component.\n\n### **CSS Properties:**\n - **--bq-status-circ** - Status circle size. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper of the status component.\n- **circle** - The colored circle that marks the status type.\n- **text** - The `<div>` container that holds the text label of the status component.",
|
|
1580
|
+
"attributes": [
|
|
1581
|
+
{
|
|
1582
|
+
"name": "type",
|
|
1583
|
+
"description": "It defines the type of status to display.",
|
|
1584
|
+
"values": [
|
|
1585
|
+
{ "name": "alert" },
|
|
1586
|
+
{ "name": "danger" },
|
|
1587
|
+
{ "name": "info" },
|
|
1588
|
+
{ "name": "neutral" },
|
|
1589
|
+
{ "name": "success" }
|
|
1590
|
+
]
|
|
1591
|
+
}
|
|
1592
|
+
],
|
|
1593
|
+
"references": []
|
|
1594
|
+
},
|
|
1595
1595
|
{
|
|
1596
1596
|
"name": "bq-steps",
|
|
1597
1597
|
"description": "The Steps Component is a UI element used to display a series of steps or stages in a process or task.\nIt is used to guide users through a process or task and to indicate their progress.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-steps divider-color=\"stroke--primary\" type=\"dot\" size=\"medium\">\n<bq-step-item status=\"completed\"> ... </bq-step-item>\n<bq-step-item status=\"error\"> ... </bq-step-item>\n<bq-step-item status=\"current\"> ... </bq-step-item>\n<bq-step-item status=\"default\"> ... </bq-step-item>\n</bq-steps>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - _default_ - The step items\n\n### **CSS Properties:**\n - **--bq-steps--divider-color** - Divider color _(default: undefined)_\n- **--bq-steps--gap** - Gap between steps _(default: undefined)_\n\n### **CSS Parts:**\n - **container** - The container wrapper of the Steps component\n- **divider-base** - The base wrapper of the divider component\n- **divider-dash-start** - The dash start wrapper of the divider component\n- **divider-dash-end** - The dash end wrapper of the divider component",
|