dap-design-system 0.40.3 → 0.41.0

package/dist/dds.d.ts

@@ -733,6 +733,8 @@ declare type CaptionProps = {
     size: never;
 };
 
+declare type ChipSize = 'sm' | 'lg';
+
 declare interface ChoiceElementMixinInterface {
     checked: boolean;
 }
@@ -2374,6 +2376,65 @@ export declare class DapDSCheckbox extends LabeledChoiceElement {
     render(): TemplateResult_2;
 }
 
+/**
+ * `dap-ds-chip`
+ * @summary A chip is a small status descriptor for UI elements.
+ * @element dap-ds-chip
+ * @title - Chip
+ *
+ * @event {{ value: string }} dds-remove - Fired when the chip is removed
+ * @event {{ value?: string, selected: boolean }} dds-select - Fired when the chip is selected
+ *
+ * @csspart base - The base part
+ * @csspart content-container - The container for the content
+ * @csspart remove-button - The remove button
+ *
+ * @cssproperty --dds-chip-border-width - Border width of the chip
+ * @cssproperty --dds-chip-border-style - Border style of the chip
+ * @cssproperty --dds-chip-border-radius - Border radius of the chip
+ * @cssProperty --dds-chip-border-color - Border color of the chip
+ * @cssproperty --dds-chip-font-weight - Font weight of the chip
+ * @cssproperty --dds-chip-line-height - Line height of the chip
+ * @cssproperty --dds-chip-transition - Transition timing for chip interactions
+ * @cssproperty --dds-chip-padding-sm - Padding for small chip size
+ * @cssproperty --dds-chip-padding-lg - Padding for large chip size
+ * @cssproperty --dds-chip-font-size-sm - Font size for small chip size
+ * @cssproperty --dds-chip-font-size-lg - Font size for large chip size
+ * @cssproperty --dds-chip-background-color - Background color of the chip
+ * @cssproperty --dds-chip-text-color - Text color of the chip
+ * @cssproperty --dds-chip-hover-background-color - Background color of the chip on hover
+ * @cssproperty --dds-chip-active-background-color - Background color of the chip when active
+ * @cssproperty --dds-chip-selected-background-color - Background color of the selected chip
+ * @cssproperty --dds-chip-selected-text-color - Text color of the selected chip
+ * @cssproperty --dds-chip-selected-border-color - Border color of the selected chip
+ * @cssproperty --dds-chip-disabled-background-color - Background color of the disabled chip
+ * @cssproperty --dds-chip-disabled-text-color - Text color of the disabled chip
+ */
+export declare class DapDSChip extends DdsElement {
+    /** The size of the badge
+     * @type { 'sm' | 'lg' }
+     */
+    size: ChipSize;
+    /** Whether the chip is removeable */
+    removeable: boolean;
+    /** Whether the chip is selectable */
+    selectable: boolean;
+    /** Whether the chip is selected */
+    selected: boolean;
+    /** Whether the chip is disabled */
+    disabled: boolean;
+    /** The value of the chip */
+    value?: string;
+    /** The aria label for the delete button */
+    deleteAriaLabel?: string;
+    static readonly styles: CSSResult;
+    updated(changedProperties: Map<string, unknown>): void;
+    private handleClick;
+    private handleRemove;
+    private handleKeyDown;
+    render(): TemplateResult_2;
+}
+
 /**
  * `dap-ds-combobox`
  * @summary A select is a form element that allows the user to select one option from a set.
@@ -6881,6 +6942,10 @@ export declare type DdsPaginationChangeEvent = CustomEvent<{
     pagination: PaginationState;
 }>;
 
+export declare type DdsRemoveEvent = CustomEvent<{
+    value: string;
+}>;
+
 export declare type DdsRowClickEvent = CustomEvent<SortingState[]>;
 
 export declare type DdsSearchEvent = CustomEvent<{