From 62d4ceb186dd9202fe912c04e27fcd0bff343692 Mon Sep 17 00:00:00 2001 From: Kelsey Jackson Date: Fri, 6 Jun 2025 13:41:45 -0500 Subject: [PATCH] made changes to sidebar --- .../examples/layout-patterns/checkout.html | 165 --------------- .../examples/layout-patterns/index.html | 187 ----------------- .../layout-patterns/product-single.html | 197 ------------------ .../src/react/breadcrumb-item/index.ts | 4 +- packages/webawesome/src/react/card/index.ts | 2 +- packages/webawesome/src/react/dialog/index.ts | 8 +- packages/webawesome/src/react/drawer/index.ts | 14 +- .../webawesome/src/react/icon-button/index.ts | 33 --- packages/webawesome/src/react/index.ts | 44 ++-- packages/webawesome/src/react/radio/index.ts | 2 - packages/webawesome/src/react/select/index.ts | 1 + packages/webawesome/src/react/slider/index.ts | 47 +++-- .../webawesome/src/react/tab-group/index.ts | 4 +- packages/webawesome/src/react/tab/index.ts | 2 - packages/webawesome/src/react/tag/index.ts | 4 +- .../src/react/viewport-demo/index.ts | 36 ---- 16 files changed, 73 insertions(+), 677 deletions(-) delete mode 100644 packages/webawesome/docs/assets/examples/layout-patterns/checkout.html delete mode 100644 packages/webawesome/docs/assets/examples/layout-patterns/index.html delete mode 100644 packages/webawesome/docs/assets/examples/layout-patterns/product-single.html delete mode 100644 packages/webawesome/src/react/icon-button/index.ts delete mode 100644 packages/webawesome/src/react/viewport-demo/index.ts diff --git a/packages/webawesome/docs/assets/examples/layout-patterns/checkout.html b/packages/webawesome/docs/assets/examples/layout-patterns/checkout.html deleted file mode 100644 index 7e75d0a79..000000000 --- a/packages/webawesome/docs/assets/examples/layout-patterns/checkout.html +++ /dev/null @@ -1,165 +0,0 @@ - - - - - - - Document - - - - - - - - - Get in on our holiday - deals! - -
- - -
\ No newline at end of file diff --git a/packages/webawesome/docs/assets/examples/layout-patterns/index.html b/packages/webawesome/docs/assets/examples/layout-patterns/index.html deleted file mode 100644 index 87a4e8f6b..000000000 --- a/packages/webawesome/docs/assets/examples/layout-patterns/index.html +++ /dev/null @@ -1,187 +0,0 @@ - - - - - - - Document - - - - - - - - - Get in on our holiday - deals! - -
- -
- -
- - - -
-
- - - -

© 2025 All rights reserved.

- - -
- - - - \ No newline at end of file diff --git a/packages/webawesome/docs/assets/examples/layout-patterns/product-single.html b/packages/webawesome/docs/assets/examples/layout-patterns/product-single.html deleted file mode 100644 index 04c9dbd58..000000000 --- a/packages/webawesome/docs/assets/examples/layout-patterns/product-single.html +++ /dev/null @@ -1,197 +0,0 @@ - - - - - - - Document - - - - - - - - - Get in on our holiday - deals! - -
- - -
- - - - - \ No newline at end of file diff --git a/packages/webawesome/src/react/breadcrumb-item/index.ts b/packages/webawesome/src/react/breadcrumb-item/index.ts index 12bfe626c..bdc399dab 100644 --- a/packages/webawesome/src/react/breadcrumb-item/index.ts +++ b/packages/webawesome/src/react/breadcrumb-item/index.ts @@ -11,8 +11,8 @@ const tagName = 'wa-breadcrumb-item'; * @since 2.0 * * @slot - The breadcrumb item's label. - * @slot prefix - An optional prefix, usually an icon or icon button. - * @slot suffix - An optional suffix, usually an icon or icon button. + * @slot prefix - An optional prefix, usually an icon. + * @slot suffix - An optional suffix, usually an icon. * @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If * you want to change it for all items in the group, set the separator on `` instead. * diff --git a/packages/webawesome/src/react/card/index.ts b/packages/webawesome/src/react/card/index.ts index f7d3bc9b6..de7da4c9e 100644 --- a/packages/webawesome/src/react/card/index.ts +++ b/packages/webawesome/src/react/card/index.ts @@ -24,7 +24,7 @@ const tagName = 'wa-card'; * @cssproperty [--border-color=var(--wa-color-surface-border)] - The color of the card's borders. Expects a single value. * @cssproperty [--inner-border-color=var(--wa-color-surface-border)] - The color of the card's inner borders, e.g. those separating headers and footers from the main content. Expects a single value. * @cssproperty [--border-width=var(--wa-panel-border-width)] - The width of the card's borders. Expects a single value. - * @cssproperty [--spacing=var(--wa-space)] - The amount of space around and between sections of the card. Expects a single value. + * @cssproperty [--spacing=var(--wa-space-l)] - The amount of space around and between sections of the card. Expects a single value. */ const reactWrapper = createComponent({ tagName, diff --git a/packages/webawesome/src/react/dialog/index.ts b/packages/webawesome/src/react/dialog/index.ts index c06b387a6..708f928da 100644 --- a/packages/webawesome/src/react/dialog/index.ts +++ b/packages/webawesome/src/react/dialog/index.ts @@ -14,11 +14,11 @@ const tagName = 'wa-dialog'; * @status stable * @since 2.0 * - * @dependency wa-icon-button + * @dependency wa-button * * @slot - The dialog's main content. * @slot label - The dialog's label. Alternatively, you can use the `label` attribute. - * @slot header-actions - Optional actions to add to the header. Works best with ``. + * @slot header-actions - Optional actions to add to the header. Works best with ``. * @slot footer - The dialog's footer, usually one or more buttons representing various options. * * @event wa-show - Emitted when the dialog opens. @@ -31,9 +31,9 @@ const tagName = 'wa-dialog'; * @event wa-after-hide - Emitted after the dialog closes and all animations are complete. * * @csspart header - The dialog's header. This element wraps the title and header actions. - * @csspart header-actions - Optional actions to add to the header. Works best with ``. + * @csspart header-actions - Optional actions to add to the header. Works best with ``. * @csspart title - The dialog's title. - * @csspart close-button - The close button, a ``. + * @csspart close-button - The close button, a ``. * @csspart close-button__base - The close button's exported `base` part. * @csspart body - The dialog's body. * @csspart footer - The dialog's footer. diff --git a/packages/webawesome/src/react/drawer/index.ts b/packages/webawesome/src/react/drawer/index.ts index ff02422de..916f69121 100644 --- a/packages/webawesome/src/react/drawer/index.ts +++ b/packages/webawesome/src/react/drawer/index.ts @@ -14,11 +14,11 @@ const tagName = 'wa-drawer'; * @status stable * @since 2.0 * - * @dependency wa-icon-button + * @dependency wa-button * * @slot - The drawer's main content. * @slot label - The drawer's label. Alternatively, you can use the `label` attribute. - * @slot header-actions - Optional actions to add to the header. Works best with ``. + * @slot header-actions - Optional actions to add to the header. Works best with ``. * @slot footer - The drawer's footer, usually one or more buttons representing various options. * * @event wa-show - Emitted when the drawer opens. @@ -26,15 +26,15 @@ const tagName = 'wa-drawer'; * @event wa-hide - Emitted when the drawer closes. * @event wa-after-hide - Emitted after the drawer closes and all animations are complete. * @event {{ source: Element }} wa-hide - Emitted when the drawer is requesting to close. Calling - * `event.preventDefault()` will prevent the dialog from closing. You can inspect `event.detail.source` to see which - * element caused the dialog to close. If the source is the dialog element itself, the user has pressed [[Escape]] or - * the dialog has been closed programmatically. Avoid using this unless closing the dialog will result in destructive + * `event.preventDefault()` will prevent the drawer from closing. You can inspect `event.detail.source` to see which + * element caused the drawer to close. If the source is the drawer element itself, the user has pressed [[Escape]] or + * the drawer has been closed programmatically. Avoid using this unless closing the drawer will result in destructive * behavior such as data loss. * * @csspart header - The drawer's header. This element wraps the title and header actions. - * @csspart header-actions - Optional actions to add to the header. Works best with ``. + * @csspart header-actions - Optional actions to add to the header. Works best with ``. * @csspart title - The drawer's title. - * @csspart close-button - The close button, a ``. + * @csspart close-button - The close button, a ``. * @csspart close-button__base - The close button's exported `base` part. * @csspart body - The drawer's body. * @csspart footer - The drawer's footer. diff --git a/packages/webawesome/src/react/icon-button/index.ts b/packages/webawesome/src/react/icon-button/index.ts deleted file mode 100644 index 69e06c295..000000000 --- a/packages/webawesome/src/react/icon-button/index.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { createComponent } from '@lit/react'; -import * as React from 'react'; -import Component from '../../components/icon-button/icon-button.js'; - -const tagName = 'wa-icon-button'; - -/** - * @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars. - * @documentation https://backers.webawesome.com/docs/components/icon-button - * @status stable - * @since 2.0 - * - * @dependency wa-icon - * - * @event blur - Emitted when the icon button loses focus. - * @event focus - Emitted when the icon button gains focus. - * - * @cssproperty [--background-color-hover=var(--wa-color-neutral-fill-quiet)] - The color of the button's background on hover. - * @cssproperty [--background-color-active=var(--wa-color-neutral-fill-quiet)] - The color of the button's background on `:active`. - * @cssproperty --text-color-hover - The color of the button's background on hover. - * @cssproperty --text-color-active - The color of the button's background on `:active`. - * - * @csspart base - The component's base wrapper. - */ -const reactWrapper = createComponent({ - tagName, - elementClass: Component, - react: React, - events: {}, - displayName: 'WaIconButton', -}); - -export default reactWrapper; diff --git a/packages/webawesome/src/react/index.ts b/packages/webawesome/src/react/index.ts index 93a769864..1f5e03556 100644 --- a/packages/webawesome/src/react/index.ts +++ b/packages/webawesome/src/react/index.ts @@ -1,15 +1,15 @@ export { default as WaAnimatedImage } from './animated-image/index.js'; -export { default as WaAvatar } from './avatar/index.js'; -export { default as WaBadge } from './badge/index.js'; export { default as WaAnimation } from './animation/index.js'; export { default as WaBreadcrumb } from './breadcrumb/index.js'; -export { default as WaButton } from './button/index.js'; export { default as WaBreadcrumbItem } from './breadcrumb-item/index.js'; +export { default as WaButton } from './button/index.js'; +export { default as WaBadge } from './badge/index.js'; +export { default as WaAvatar } from './avatar/index.js'; export { default as WaButtonGroup } from './button-group/index.js'; export { default as WaCallout } from './callout/index.js'; export { default as WaCard } from './card/index.js'; -export { default as WaCarouselItem } from './carousel-item/index.js'; export { default as WaCarousel } from './carousel/index.js'; +export { default as WaCarouselItem } from './carousel-item/index.js'; export { default as WaCheckbox } from './checkbox/index.js'; export { default as WaColorPicker } from './color-picker/index.js'; export { default as WaComparison } from './comparison/index.js'; @@ -17,43 +17,43 @@ export { default as WaCopyButton } from './copy-button/index.js'; export { default as WaDetails } from './details/index.js'; export { default as WaDialog } from './dialog/index.js'; export { default as WaDivider } from './divider/index.js'; -export { default as WaFormatBytes } from './format-bytes/index.js'; -export { default as WaDropdown } from './dropdown/index.js'; export { default as WaDrawer } from './drawer/index.js'; +export { default as WaDropdown } from './dropdown/index.js'; +export { default as WaFormatBytes } from './format-bytes/index.js'; export { default as WaFormatDate } from './format-date/index.js'; export { default as WaFormatNumber } from './format-number/index.js'; export { default as WaIcon } from './icon/index.js'; -export { default as WaIconButton } from './icon-button/index.js'; export { default as WaInclude } from './include/index.js'; export { default as WaInput } from './input/index.js'; -export { default as WaMenuItem } from './menu-item/index.js'; -export { default as WaOption } from './option/index.js'; -export { default as WaMutationObserver } from './mutation-observer/index.js'; -export { default as WaMenuLabel } from './menu-label/index.js'; export { default as WaMenu } from './menu/index.js'; -export { default as WaProgressRing } from './progress-ring/index.js'; -export { default as WaProgressBar } from './progress-bar/index.js'; +export { default as WaMenuItem } from './menu-item/index.js'; +export { default as WaMenuLabel } from './menu-label/index.js'; +export { default as WaMutationObserver } from './mutation-observer/index.js'; export { default as WaPage } from './page/index.js'; +export { default as WaPopover } from './popover/index.js'; export { default as WaPopup } from './popup/index.js'; +export { default as WaProgressRing } from './progress-ring/index.js'; export { default as WaQrCode } from './qr-code/index.js'; -export { default as WaRadioGroup } from './radio-group/index.js'; -export { default as WaRating } from './rating/index.js'; +export { default as WaOption } from './option/index.js'; export { default as WaRadio } from './radio/index.js'; +export { default as WaRadioGroup } from './radio-group/index.js'; export { default as WaRelativeTime } from './relative-time/index.js'; +export { default as WaProgressBar } from './progress-bar/index.js'; export { default as WaResizeObserver } from './resize-observer/index.js'; export { default as WaScroller } from './scroller/index.js'; -export { default as WaSelect } from './select/index.js'; +export { default as WaRating } from './rating/index.js'; export { default as WaSkeleton } from './skeleton/index.js'; -export { default as WaSpinner } from './spinner/index.js'; export { default as WaSlider } from './slider/index.js'; export { default as WaSplitPanel } from './split-panel/index.js'; +export { default as WaSelect } from './select/index.js'; export { default as WaSwitch } from './switch/index.js'; -export { default as WaTabGroup } from './tab-group/index.js'; -export { default as WaTabPanel } from './tab-panel/index.js'; export { default as WaTab } from './tab/index.js'; +export { default as WaTabGroup } from './tab-group/index.js'; +export { default as WaSpinner } from './spinner/index.js'; export { default as WaTag } from './tag/index.js'; export { default as WaTextarea } from './textarea/index.js'; -export { default as WaTooltip } from './tooltip/index.js'; export { default as WaTree } from './tree/index.js'; -export { default as WaViewportDemo } from './viewport-demo/index.js'; -export { default as WaTreeItem } from './tree-item/index.js'; \ No newline at end of file +export { default as WaTabPanel } from './tab-panel/index.js'; +export { default as WaTreeItem } from './tree-item/index.js'; +export { default as WaZoomableFrame } from './zoomable-frame/index.js'; +export { default as WaTooltip } from './tooltip/index.js'; \ No newline at end of file diff --git a/packages/webawesome/src/react/radio/index.ts b/packages/webawesome/src/react/radio/index.ts index a15295fb6..e92e19e52 100644 --- a/packages/webawesome/src/react/radio/index.ts +++ b/packages/webawesome/src/react/radio/index.ts @@ -13,7 +13,6 @@ const tagName = 'wa-radio'; * @dependency wa-icon * * @slot - The radio's label. - * @slot hint - Text that describes how to use the checkbox. Alternatively, you can use the `hint` attribute. * * @event blur - Emitted when the control loses focus. * @event focus - Emitted when the control gains focus. @@ -21,7 +20,6 @@ const tagName = 'wa-radio'; * @csspart control - The circular container that wraps the radio's checked state. * @csspart checked-icon - The checked icon. * @csspart label - The container that wraps the radio's label. - * @csspart hint - The hint's wrapper. * * @cssproperty --background-color - The radio's background color. * @cssproperty --background-color-checked - The radio's background color when checked. diff --git a/packages/webawesome/src/react/select/index.ts b/packages/webawesome/src/react/select/index.ts index caa1adf4d..5348066fe 100644 --- a/packages/webawesome/src/react/select/index.ts +++ b/packages/webawesome/src/react/select/index.ts @@ -73,6 +73,7 @@ const tagName = 'wa-select'; * @cssproperty --border-color - The border color of the select's combobox. * @cssproperty --border-width - The width of the select's borders, including the listbox. * @cssproperty --box-shadow - The shadow effects around the edges of the select's combobox. + * @cssproperty [--tag-max-size=10ch] - When using `multiple`, the max size of tags before their content is truncated. * * @cssstate blank - The select is empty. */ diff --git a/packages/webawesome/src/react/slider/index.ts b/packages/webawesome/src/react/slider/index.ts index f9b7b97b1..6c1c62ac4 100644 --- a/packages/webawesome/src/react/slider/index.ts +++ b/packages/webawesome/src/react/slider/index.ts @@ -9,13 +9,19 @@ export type { WaInvalidEvent } from '../../events/events.js'; const tagName = 'wa-slider'; /** + * + * * @summary Ranges allow the user to select a single value within a given range using a slider. * @documentation https://backers.webawesome.com/docs/components/range * @status stable * @since 2.0 * + * @dependency wa-tooltip + * * @slot label - The slider label. Alternatively, you can use the `label` attribute. * @slot hint - Text that describes how to use the input. Alternatively, you can use the `hint` attribute. + * instead. + * @slot reference - One or more reference labels to show visually below the slider. * * @event blur - Emitted when the control loses focus. * @event change - Emitted when an alteration to the control's value is committed by the user. @@ -23,22 +29,33 @@ const tagName = 'wa-slider'; * @event input - Emitted when the control receives input. * @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied. * - * @csspart form-control - The form control that wraps the label, input, and hint. - * @csspart form-control-label - The input's label. - * @csspart form-control-input - The input's wrapper. - * @csspart hint - The hint's wrapper. - * @csspart base - The internal `` element. - * @csspart tooltip - The slider tooltip. + * @csspart label - The element that contains the sliders's label. + * @csspart hint - The element that contains the slider's description. + * @csspart slider - The focusable element with `role="slider"`. Contains the track and reference slot. + * @csspart track - The slider's track. + * @csspart indicator - The colored indicator that shows from the start of the slider to the current value. + * @csspart markers - The container that holds all the markers when `with-markers` is used. + * @csspart marker - The individual markers that are shown when `with-markers` is used. + * @csspart references - The container that holds references that get slotted in. + * @csspart thumb - The slider's thumb. + * @csspart thumb-min - The min value thumb in a range slider. + * @csspart thumb-max - The max value thumb in a range slider. + * @csspart tooltip - The tooltip, a `` element. + * @csspart tooltip__tooltip - The tooltip's `tooltip` part. + * @csspart tooltip__content - The tooltip's `content` part. + * @csspart tooltip__arrow - The tooltip's `arrow` part. * - * @cssproperty --thumb-color - The color of the thumb. - * @cssproperty --thumb-gap - The visual gap between the edges of the thumb and the track. - * @cssproperty --thumb-shadow - The shadow effects around the edges of the thumb. - * @cssproperty --thumb-size - The size of the thumb. - * @cssproperty --tooltip-offset - The vertical distance the tooltip is offset from the thumb. - * @cssproperty --track-color-active - The color of the portion of the track that represents the current value. - * @cssproperty --track-color-inactive - The of the portion of the track that represents the remaining value. - * @cssproperty --track-height - The height of the track. - * @cssproperty --track-active-offset - The point of origin of the active track. + * @cssstate disabled - Applied when the slider is disabled. + * @cssstate dragging - Applied when the slider is being dragged. + * @cssstate focused - Applied when the slider has focus. + * @cssstate user-valid - Applied when the slider is valid and the user has sufficiently interacted with it. + * @cssstate user-invalid - Applied when the slider is invalid and the user has sufficiently interacted with it. + * + * @cssproperty [--track-size=0.75em] - The height or width of the slider's track. + * @cssproperty [--marker-width=0.1875em] - The width of each individual marker. + * @cssproperty [--marker-height=0.1875em] - The height of each individual marker. + * @cssproperty [--thumb-width=1.25em] - The width of the thumb. + * @cssproperty [--thumb-height=1.25em] - The height of the thumb. */ const reactWrapper = createComponent({ tagName, diff --git a/packages/webawesome/src/react/tab-group/index.ts b/packages/webawesome/src/react/tab-group/index.ts index 1012ac47b..9125d693b 100644 --- a/packages/webawesome/src/react/tab-group/index.ts +++ b/packages/webawesome/src/react/tab-group/index.ts @@ -14,7 +14,7 @@ const tagName = 'wa-tab-group'; * @status stable * @since 2.0 * - * @dependency wa-icon-button + * @dependency wa-button * @dependency wa-tab * @dependency wa-tab-panel * @@ -29,7 +29,7 @@ const tagName = 'wa-tab-group'; * @csspart nav - The tab group's navigation container where tabs are slotted in. * @csspart tabs - The container that wraps the tabs. * @csspart body - The tab group's body where tab panels are slotted in. - * @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, an ``. + * @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, a ``. * @csspart scroll-button-start - The starting scroll button. * @csspart scroll-button-end - The ending scroll button. * @csspart scroll-button__base - The scroll button's exported `base` part. diff --git a/packages/webawesome/src/react/tab/index.ts b/packages/webawesome/src/react/tab/index.ts index cda904294..628b2c63a 100644 --- a/packages/webawesome/src/react/tab/index.ts +++ b/packages/webawesome/src/react/tab/index.ts @@ -15,8 +15,6 @@ const tagName = 'wa-tab'; * @cssproperty --active-tab-color - The color of the active tab's label. * * @csspart base - The component's base wrapper. - * @csspart close-button - The close button, an ``. - * @csspart base - The close button's exported `base` part. */ const reactWrapper = createComponent({ tagName, diff --git a/packages/webawesome/src/react/tag/index.ts b/packages/webawesome/src/react/tag/index.ts index e097c0c5a..68fb89f95 100644 --- a/packages/webawesome/src/react/tag/index.ts +++ b/packages/webawesome/src/react/tag/index.ts @@ -14,7 +14,7 @@ const tagName = 'wa-tag'; * @status stable * @since 2.0 * - * @dependency wa-icon-button + * @dependency wa-button * * @slot - The tag's content. * @@ -22,7 +22,7 @@ const tagName = 'wa-tag'; * * @csspart base - The component's base wrapper. * @csspart content - The tag's content. - * @csspart remove-button - The tag's remove button, an ``. + * @csspart remove-button - The tag's remove button, a ``. * @csspart remove-button__base - The remove button's exported `base` part. */ const reactWrapper = createComponent({ diff --git a/packages/webawesome/src/react/viewport-demo/index.ts b/packages/webawesome/src/react/viewport-demo/index.ts deleted file mode 100644 index 43f9bb1a2..000000000 --- a/packages/webawesome/src/react/viewport-demo/index.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { createComponent } from '@lit/react'; -import * as React from 'react'; -import Component from '../../components/viewport-demo/viewport-demo.js'; - -const tagName = 'wa-viewport-demo'; - -/** - * @summary Viewport demos can be used to display an iframe as a resizable, zoomable preview. - * @documentation https://backers.webawesome.com/docs/components/viewport-demo - * @status experimental - * @since 3.0 - * - * @dependency wa-icon-button - * - * @slot - The iframe (usually an `