From 76946d22b4152ebd96253de7ef75086e1a3c852b Mon Sep 17 00:00:00 2001 From: Thijs Louisse Date: Wed, 30 Jul 2025 12:36:40 +0200 Subject: [PATCH] fix: add @slot and @customElement for better ce-manifest output --- packages/ui/components/accordion/src/LionAccordion.js | 5 +++-- packages/ui/components/button/src/LionButton.js | 2 ++ packages/ui/components/button/src/LionButtonReset.js | 2 ++ packages/ui/components/button/src/LionButtonSubmit.js | 2 ++ .../ui/components/checkbox-group/src/LionCheckbox.js | 3 +++ .../components/checkbox-group/src/LionCheckboxGroup.js | 2 ++ .../checkbox-group/src/LionCheckboxIndeterminate.js | 3 +++ .../ui/components/collapsible/src/LionCollapsible.js | 5 ++++- packages/ui/components/combobox/src/LionCombobox.js | 5 +++++ packages/ui/components/dialog/src/LionDialog.js | 3 +++ packages/ui/components/drawer/src/LionDrawer.js | 9 +++++++++ packages/ui/components/fieldset/src/LionFieldset.js | 2 +- .../ui/components/form-core/src/FormControlMixin.js | 10 ++++++++++ packages/ui/components/form-core/src/FormatMixin.js | 2 +- packages/ui/components/form/src/LionForm.js | 1 - packages/ui/components/icon/src/LionIcon.js | 2 ++ packages/ui/components/input-file/src/LionInputFile.js | 9 +++++++++ .../input-tel-dropdown/src/LionInputTelDropdown.js | 2 ++ packages/ui/components/input-tel/src/LionInputTel.js | 3 +++ packages/ui/components/listbox/src/LionListbox.js | 2 ++ packages/ui/components/overlays/src/OverlayMixin.js | 4 ++++ .../progress-indicator/src/LionProgressIndicator.js | 4 ++++ .../ui/components/radio-group/src/LionRadioGroup.js | 4 +++- .../ui/components/select-rich/src/LionSelectInvoker.js | 2 ++ .../ui/components/select-rich/src/LionSelectRich.js | 2 ++ packages/ui/components/select/src/LionSelect.js | 4 ++++ packages/ui/components/steps/src/LionStep.js | 1 - packages/ui/components/steps/src/LionSteps.js | 1 - packages/ui/components/switch/src/LionSwitch.js | 3 +++ packages/ui/components/switch/src/LionSwitchButton.js | 5 +++++ packages/ui/components/tabs/src/LionTabs.js | 8 ++++++++ 31 files changed, 103 insertions(+), 9 deletions(-) diff --git a/packages/ui/components/accordion/src/LionAccordion.js b/packages/ui/components/accordion/src/LionAccordion.js index 6c58bd3ad..b1b090806 100644 --- a/packages/ui/components/accordion/src/LionAccordion.js +++ b/packages/ui/components/accordion/src/LionAccordion.js @@ -14,10 +14,11 @@ import { uuid } from '@lion/ui/core.js'; */ /** - * # webcomponent + * @slot invoker - The invoker element for the accordion + * @slot content - The content element for the accordion + * @slot _accordion - The slot for the accordion, used to rearrange invokers and content * * @customElement lion-accordion - * @extends LitElement */ export class LionAccordion extends LitElement { static get properties() { diff --git a/packages/ui/components/button/src/LionButton.js b/packages/ui/components/button/src/LionButton.js index 191a56805..ac757a944 100644 --- a/packages/ui/components/button/src/LionButton.js +++ b/packages/ui/components/button/src/LionButton.js @@ -25,6 +25,8 @@ const isSpaceKeyboardClickEvent = (/** @type {KeyboardEvent} */ e) => e.key === * `
` support is needed: * - When type="reset|submit" should be supported, use LionButtonReset. * - When implicit form submission should be supported on top, use LionButtonSubmit. + * + * @customElement lion-button */ export class LionButton extends DisabledWithTabIndexMixin(LitElement) { static get properties() { diff --git a/packages/ui/components/button/src/LionButtonReset.js b/packages/ui/components/button/src/LionButtonReset.js index cd729fad2..53846e068 100644 --- a/packages/ui/components/button/src/LionButtonReset.js +++ b/packages/ui/components/button/src/LionButtonReset.js @@ -17,6 +17,8 @@ import { LionButton } from './LionButton.js'; * implicit form submission logic), but LionButtonReset is an easier to grasp name for * Application Developers: for reset buttons, always use LionButtonReset, for submit * buttons always use LionButtonSubmit. + * + * @customElement lion-button-reset */ export class LionButtonReset extends LionButton { constructor() { diff --git a/packages/ui/components/button/src/LionButtonSubmit.js b/packages/ui/components/button/src/LionButtonSubmit.js index 9839a21db..8f607b67f 100644 --- a/packages/ui/components/button/src/LionButtonSubmit.js +++ b/packages/ui/components/button/src/LionButtonSubmit.js @@ -39,6 +39,8 @@ function createImplicitSubmitHelperButton() { * - the Application Developer should be able to switch types between 'submit'|'reset'|'button' * (this is similar to how native HTMLButtonElement works) * - a submit button with native form support is needed + * + * @customElement lion-button-submit */ export class LionButtonSubmit extends LionButtonReset { /** diff --git a/packages/ui/components/checkbox-group/src/LionCheckbox.js b/packages/ui/components/checkbox-group/src/LionCheckbox.js index b4243f83f..fa3567456 100644 --- a/packages/ui/components/checkbox-group/src/LionCheckbox.js +++ b/packages/ui/components/checkbox-group/src/LionCheckbox.js @@ -1,6 +1,9 @@ import { LionInput } from '@lion/ui/input.js'; import { ChoiceInputMixin } from '@lion/ui/form-core.js'; +/** + * @customElement lion-checkbox + */ export class LionCheckbox extends ChoiceInputMixin(LionInput) { connectedCallback() { super.connectedCallback(); diff --git a/packages/ui/components/checkbox-group/src/LionCheckboxGroup.js b/packages/ui/components/checkbox-group/src/LionCheckboxGroup.js index a96ddbcc3..fa286a054 100644 --- a/packages/ui/components/checkbox-group/src/LionCheckboxGroup.js +++ b/packages/ui/components/checkbox-group/src/LionCheckboxGroup.js @@ -3,6 +3,8 @@ import { ChoiceGroupMixin, FormGroupMixin } from '@lion/ui/form-core.js'; /** * A wrapper around multiple checkboxes + * + * @customElement lion-checkbox-group */ export class LionCheckboxGroup extends ChoiceGroupMixin(FormGroupMixin(LitElement)) { constructor() { diff --git a/packages/ui/components/checkbox-group/src/LionCheckboxIndeterminate.js b/packages/ui/components/checkbox-group/src/LionCheckboxIndeterminate.js index 728b9d448..dfbb44c72 100644 --- a/packages/ui/components/checkbox-group/src/LionCheckboxIndeterminate.js +++ b/packages/ui/components/checkbox-group/src/LionCheckboxIndeterminate.js @@ -5,6 +5,9 @@ import { LionCheckbox } from './LionCheckbox.js'; * @typedef {import('./LionCheckboxGroup.js').LionCheckboxGroup} LionCheckboxGroup */ +/** + * @customElement lion-checkbox-indeterminate + */ export class LionCheckboxIndeterminate extends LionCheckbox { static get styles() { return [ diff --git a/packages/ui/components/collapsible/src/LionCollapsible.js b/packages/ui/components/collapsible/src/LionCollapsible.js index 284a24023..4cfe391cb 100644 --- a/packages/ui/components/collapsible/src/LionCollapsible.js +++ b/packages/ui/components/collapsible/src/LionCollapsible.js @@ -1,10 +1,13 @@ import { LitElement, html, css } from 'lit'; import { uuid } from '@lion/ui/core.js'; + /** * `LionCollapsible` is a class for custom collapsible element (`` web component). * + * @slot invoker - The invoker element for the collapsible + * @slot content - The content element for the collapsible + * * @customElement lion-collapsible - * @extends LitElement */ export class LionCollapsible extends LitElement { static get styles() { diff --git a/packages/ui/components/combobox/src/LionCombobox.js b/packages/ui/components/combobox/src/LionCombobox.js index b345901ec..d77056af1 100644 --- a/packages/ui/components/combobox/src/LionCombobox.js +++ b/packages/ui/components/combobox/src/LionCombobox.js @@ -28,6 +28,11 @@ const matchA11ySpanReverseFns = new WeakMap(); /** * LionCombobox: implements the wai-aria combobox design pattern and integrates it as a Lion * FormControl + * + * @slot listbox - The listbox element for the combobox, e.g. + * @slot selection-display - The selection display element for the combobox, e.g. + * + * @customElement lion-combobox */ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMixin(LionListbox))) { /** @type {any} */ diff --git a/packages/ui/components/dialog/src/LionDialog.js b/packages/ui/components/dialog/src/LionDialog.js index 55069f95d..c18ac9837 100644 --- a/packages/ui/components/dialog/src/LionDialog.js +++ b/packages/ui/components/dialog/src/LionDialog.js @@ -1,6 +1,9 @@ import { html, LitElement } from 'lit'; import { OverlayMixin, withModalDialogConfig } from '@lion/ui/overlays.js'; +/** + * @customElement lion-dialog + */ export class LionDialog extends OverlayMixin(LitElement) { /** @type {any} */ static get properties() { diff --git a/packages/ui/components/drawer/src/LionDrawer.js b/packages/ui/components/drawer/src/LionDrawer.js index 9cbf65924..05e755834 100644 --- a/packages/ui/components/drawer/src/LionDrawer.js +++ b/packages/ui/components/drawer/src/LionDrawer.js @@ -7,6 +7,15 @@ const EVENT = { TRANSITION_START: 'transitionstart', }; +/** + * LionDrawer: extension of lion-collapsible with drawer specific styles and animations + * + * @slot invoker - The invoker element for the drawer + * @slot content - The content element for the drawer + * @slot headline - The headline element for the drawer + * + * @customElement lion-drawer + */ export class LionDrawer extends LionCollapsible { static get properties() { return { diff --git a/packages/ui/components/fieldset/src/LionFieldset.js b/packages/ui/components/fieldset/src/LionFieldset.js index 075b221bd..03d5112ee 100644 --- a/packages/ui/components/fieldset/src/LionFieldset.js +++ b/packages/ui/components/fieldset/src/LionFieldset.js @@ -2,7 +2,7 @@ import { LitElement } from 'lit'; import { FormGroupMixin } from '@lion/ui/form-core.js'; /** - * @desc LionFieldset is basically a 'sub form' and can have its own nested sub forms. + * LionFieldset is basically a 'sub form' and can have its own nested sub forms. * It mimics the native
element in this sense, but has all the functionality of * a FormControl (advanced styling, validation, interaction states etc.) Also see * FormGroupMixin it depends on. diff --git a/packages/ui/components/form-core/src/FormControlMixin.js b/packages/ui/components/form-core/src/FormControlMixin.js index 974a07da7..ca9198ca1 100644 --- a/packages/ui/components/form-core/src/FormControlMixin.js +++ b/packages/ui/components/form-core/src/FormControlMixin.js @@ -24,6 +24,16 @@ import { FormRegisteringMixin } from './registration/FormRegisteringMixin.js'; * This Mixin is a shared fundament for all form components, it's applied on: * - LionField (which is extended to LionInput, LionTextarea, LionSelect etc. etc.) * - LionFieldset (which is extended to LionRadioGroup, LionCheckboxGroup, LionForm) + * + * @slot label - The label for the form control + * @slot help-text - The help text for the form control + * @slot input - The input element for the form control, e.g. ,