feat: add component convenience bundles

PiperOrigin-RevId: 549723539

all.ts

@@ -0,0 +1,108 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview A convenience bundle import that includes all components.
+ *
+ * WARNING: This import is intended for prototyping and development builds only.
+ * Import only the individual components used for production.
+ */
+
+// LINT.IfChange(imports)
+// go/keep-sorted start
+import './button/elevated-button.js';
+import './button/filled-button.js';
+import './button/outlined-button.js';
+import './button/text-button.js';
+import './button/tonal-button.js';
+import './checkbox/checkbox.js';
+import './chips/assist-chip.js';
+import './chips/filter-chip.js';
+import './chips/input-chip.js';
+import './chips/suggestion-chip.js';
+import './dialog/dialog.js';
+import './divider/divider.js';
+import './elevation/elevation.js';
+import './fab/branded-fab.js';
+import './fab/fab.js';
+import './field/filled-field.js';
+import './field/outlined-field.js';
+import './focus/focus-ring.js';
+import './icon/icon.js';
+import './iconbutton/filled-icon-button.js';
+import './iconbutton/filled-tonal-icon-button.js';
+import './iconbutton/outlined-icon-button.js';
+import './iconbutton/standard-icon-button.js';
+import './list/list.js';
+import './list/list-item.js';
+import './list/list-item-link.js';
+import './menu/menu.js';
+import './menu/menu-item.js';
+import './menu/menu-item-link.js';
+import './menu/sub-menu-item.js';
+import './progress/circular-progress.js';
+import './progress/linear-progress.js';
+import './radio/radio.js';
+import './ripple/ripple.js';
+import './select/filled-select.js';
+import './select/outlined-select.js';
+import './select/select-option.js';
+import './slider/slider.js';
+import './switch/switch.js';
+import './tabs/tab.js';
+import './tabs/tabs.js';
+import './textfield/filled-text-field.js';
+import './textfield/outlined-text-field.js';
+// go/keep-sorted end
+// LINT.ThenChange(:exports)
+
+// LINT.IfChange(exports)
+// go/keep-sorted start
+export * from './button/elevated-button.js';
+export * from './button/filled-button.js';
+export * from './button/outlined-button.js';
+export * from './button/text-button.js';
+export * from './button/tonal-button.js';
+export * from './checkbox/checkbox.js';
+export * from './chips/assist-chip.js';
+export * from './chips/filter-chip.js';
+export * from './chips/input-chip.js';
+export * from './chips/suggestion-chip.js';
+export * from './dialog/dialog.js';
+export * from './divider/divider.js';
+export * from './elevation/elevation.js';
+export * from './fab/branded-fab.js';
+export * from './fab/fab.js';
+export * from './field/filled-field.js';
+export * from './field/outlined-field.js';
+export * from './focus/focus-ring.js';
+export * from './icon/icon.js';
+export * from './iconbutton/filled-icon-button.js';
+export * from './iconbutton/filled-tonal-icon-button.js';
+export * from './iconbutton/outlined-icon-button.js';
+export * from './iconbutton/standard-icon-button.js';
+export * from './list/list.js';
+export * from './list/list-item.js';
+export * from './list/list-item-link.js';
+export * from './menu/menu.js';
+export * from './menu/menu-item.js';
+export * from './menu/menu-item-link.js';
+export * from './menu/sub-menu-item.js';
+export * from './progress/circular-progress.js';
+export * from './progress/linear-progress.js';
+export * from './radio/radio.js';
+export * from './ripple/ripple.js';
+export * from './select/filled-select.js';
+export * from './select/outlined-select.js';
+export * from './select/select-option.js';
+export * from './slider/slider.js';
+export * from './switch/switch.js';
+export * from './tabs/tab.js';
+export * from './tabs/tabs.js';
+export * from './textfield/filled-text-field.js';
+export * from './textfield/outlined-text-field.js';
+// go/keep-sorted end
+// LINT.ThenChange(:imports)

common.ts

@@ -0,0 +1,72 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview A convenience bundle import that includes common components.
+ *
+ * WARNING: This import is intended for prototyping and development builds only.
+ * It is smaller than `@material/web/all.js` and includes the most common
+ * components for starting a project. Import only the individual components used
+ * for production.
+ */
+
+// LINT.IfChange(imports)
+// go/keep-sorted start
+import './button/filled-button.js';
+import './button/outlined-button.js';
+import './button/text-button.js';
+import './checkbox/checkbox.js';
+import './chips/assist-chip.js';
+import './chips/filter-chip.js';
+import './dialog/dialog.js';
+import './icon/icon.js';
+import './iconbutton/standard-icon-button.js';
+import './list/list.js';
+import './list/list-item.js';
+import './list/list-item-link.js';
+import './menu/menu.js';
+import './menu/menu-item.js';
+import './menu/menu-item-link.js';
+import './menu/sub-menu-item.js';
+import './progress/circular-progress.js';
+import './progress/linear-progress.js';
+import './radio/radio.js';
+import './select/outlined-select.js';
+import './select/select-option.js';
+import './tabs/tab.js';
+import './tabs/tabs.js';
+import './textfield/outlined-text-field.js';
+// go/keep-sorted end
+// LINT.ThenChange(:exports)
+
+// LINT.IfChange(exports)
+// go/keep-sorted start
+export * from './button/filled-button.js';
+export * from './button/outlined-button.js';
+export * from './button/text-button.js';
+export * from './checkbox/checkbox.js';
+export * from './chips/assist-chip.js';
+export * from './chips/filter-chip.js';
+export * from './dialog/dialog.js';
+export * from './icon/icon.js';
+export * from './iconbutton/standard-icon-button.js';
+export * from './list/list.js';
+export * from './list/list-item.js';
+export * from './list/list-item-link.js';
+export * from './menu/menu.js';
+export * from './menu/menu-item.js';
+export * from './menu/menu-item-link.js';
+export * from './menu/sub-menu-item.js';
+export * from './progress/circular-progress.js';
+export * from './progress/linear-progress.js';
+export * from './radio/radio.js';
+export * from './select/outlined-select.js';
+export * from './select/select-option.js';
+export * from './tabs/tab.js';
+export * from './tabs/tabs.js';
+export * from './textfield/outlined-text-field.js';
+// go/keep-sorted end
+// LINT.ThenChange(:imports)

fab/branded-fab.ts

@@ -6,7 +6,7 @@
 
 import {customElement} from 'lit/decorators.js';
 
-import {Fab, Variant} from './lib/fab.js';
+import {Fab, FabVariant} from './lib/fab.js';
 import {styles} from './lib/fab-branded-styles.css.js';
 import {styles as forcedColors} from './lib/forced-colors-styles.css.js';
 import {styles as sharedStyles} from './lib/shared-styles.css.js';
@@ -52,7 +52,7 @@ export class MdBrandedFab extends Fab {
   /**
    * Branded FABs have no variants
    */
-  override variant!: Variant;
+  override variant!: FabVariant;
 
   override getRenderClasses() {
     return {
@@ -63,6 +63,5 @@ export class MdBrandedFab extends Fab {
       'small': false,
     };
   }
-  static override styles =
-      [sharedStyles, styles, forcedColors];
+  static override styles = [sharedStyles, styles, forcedColors];
 }

fab/demo/demo.ts

@@ -7,7 +7,7 @@
 import './index.js';
 import './material-collection.js';
 
-import {FabSize, Variant} from '@material/web/fab/fab.js';
+import {FabSize, FabVariant} from '@material/web/fab/fab.js';
 import {KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo} from './material-collection.js';
 import {boolInput, Knob, selectDropdown, textInput} from './index.js';
 
@@ -28,8 +28,8 @@ const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>('Fab', [
     })
   }),
   new Knob('variant', {
-    defaultValue: 'surface' as Variant,
-    ui: selectDropdown<Variant>({
+    defaultValue: 'surface' as FabVariant,
+    ui: selectDropdown<FabVariant>({
       options: [
         {label: 'surface', value: 'surface'},
         {label: 'primary', value: 'primary'},

fab/demo/stories.ts

@@ -8,7 +8,7 @@ import '@material/web/fab/fab.js';
 import '@material/web/icon/icon.js';
 import '@material/web/fab/branded-fab.js';
 
-import {FabSize, Variant} from '@material/web/fab/fab.js';
+import {FabSize, FabVariant} from '@material/web/fab/fab.js';
 import {MaterialStoryInit} from './material-collection.js';
 import {css, html} from 'lit';
 
@@ -18,7 +18,7 @@ export interface StoryKnobs {
   label: string;
   lowered: boolean;
   size: FabSize|undefined;
-  variant: Variant|undefined;
+  variant: FabVariant|undefined;
   reducedTouchTarget: boolean;
   hasIcon: boolean;
 }

fab/fab.ts

@@ -11,7 +11,7 @@ import {styles} from './lib/fab-styles.css.js';
 import {styles as forcedColors} from './lib/forced-colors-styles.css.js';
 import {styles as sharedStyles} from './lib/shared-styles.css.js';
 
-export {Variant} from './lib/fab.js';
+export {FabVariant} from './lib/fab.js';
 export {FabSize} from './lib/shared.js';
 
 declare global {
@@ -49,6 +49,5 @@ declare global {
  */
 @customElement('md-fab')
 export class MdFab extends Fab {
-  static override styles =
-      [sharedStyles, styles, forcedColors];
+  static override styles = [sharedStyles, styles, forcedColors];
 }

fab/lib/fab.ts

@@ -11,14 +11,14 @@ import {SharedFab} from './shared.js';
 /**
  * The variants available to non-branded FABs.
  */
-export type Variant = 'surface'|'primary'|'secondary'|'tertiary';
+export type FabVariant = 'surface'|'primary'|'secondary'|'tertiary';
 
 // tslint:disable-next-line:enforce-comments-on-exported-symbols
 export class Fab extends SharedFab {
   /**
    * The FAB color variant to render.
    */
-  @property() variant: Variant = 'surface';
+  @property() variant: FabVariant = 'surface';
 
   override getRenderClasses() {
     return {
@@ -28,4 +28,4 @@ export class Fab extends SharedFab {
       'tertiary': this.variant === 'tertiary',
     };
   }
-}
+}

tabs/demo/stories.ts

@@ -9,7 +9,7 @@ import '@material/web/iconbutton/standard-icon-button.js';
 import '@material/web/tabs/tabs.js';
 
 import {MaterialStoryInit} from './material-collection.js';
-import {MdTabs, Variant} from '@material/web/tabs/tabs.js';
+import {MdTabs, TabVariant} from '@material/web/tabs/tabs.js';
 import {css, html, nothing} from 'lit';
 import {classMap} from 'lit/directives/class-map.js';
 
@@ -63,7 +63,7 @@ const primary: MaterialStoryInit<StoryKnobs> = {
     const tabContent = getTabContentGenerator(knobs);
     const inlineIcon = knobs.inlineIcon;
     const vertical = knobs.vertical ? 'vertical' : '';
-    const variant = `primary ${vertical}` as Variant;
+    const variant = `primary ${vertical}` as TabVariant;
     const classes = {vertical};
 
     return html`
@@ -100,7 +100,7 @@ const secondary: MaterialStoryInit<StoryKnobs> = {
     const tabContent = getTabContentGenerator(knobs);
     const inlineIcon = knobs.inlineIcon;
     const vertical = knobs.vertical ? 'vertical' : '';
-    const variant = `secondary ${vertical}` as Variant;
+    const variant = `secondary ${vertical}` as TabVariant;
     const classes = {vertical};
 
     return html`
@@ -134,7 +134,7 @@ const scrolling: MaterialStoryInit<StoryKnobs> = {
     const tabContent = getTabContentGenerator(knobs);
     const inlineIcon = knobs.inlineIcon;
     const vertical = knobs.vertical ? 'vertical' : '';
-    const variant = `primary ${vertical}` as Variant;
+    const variant = `primary ${vertical}` as TabVariant;
     const classes = {vertical, scrolling: true};
 
     return html`
@@ -197,7 +197,7 @@ const custom: MaterialStoryInit<StoryKnobs> = {
     const tabContent = getTabContentGenerator(knobs);
     const inlineIcon = knobs.inlineIcon;
     const vertical = knobs.vertical ? 'vertical' : '';
-    const variant = `primary ${vertical}` as Variant;
+    const variant = `primary ${vertical}` as TabVariant;
     const classes = {vertical, custom: true};
 
     return html`
@@ -231,8 +231,8 @@ const primaryAndSecondary: MaterialStoryInit<StoryKnobs> = {
     const tabContent = getTabContentGenerator(knobs);
     const inlineIcon = knobs.inlineIcon;
     const vertical = knobs.vertical ? 'vertical' : '';
-    const variant = `primary ${vertical}` as Variant;
-    const secondaryVariant = `secondary ${vertical}` as Variant;
+    const variant = `primary ${vertical}` as TabVariant;
+    const secondaryVariant = `secondary ${vertical}` as TabVariant;
     const classes = {vertical};
 
     // show the selected secondary tabs
@@ -334,7 +334,7 @@ const dynamic: MaterialStoryInit<StoryKnobs> = {
   render(knobs) {
     const inlineIcon = knobs.inlineIcon;
     const vertical = knobs.vertical ? 'vertical' : '';
-    const variant = `primary ${vertical}` as Variant;
+    const variant = `primary ${vertical}` as TabVariant;
     const classes = {vertical, scrolling: true};
 
     function getTabs(event: Event) {
@@ -430,4 +430,4 @@ function getTabContentGenerator(knobs: StoryKnobs) {
 
 /** Tabs stories. */
 export const stories =
-    [primary, secondary, scrolling, custom, primaryAndSecondary, dynamic];
+    [primary, secondary, scrolling, custom, primaryAndSecondary, dynamic];

tabs/lib/tab.ts

@@ -32,7 +32,7 @@ type Orientation = ''|'vertical';
  * Tab variant can be `primary` or `secondary and can include a space
  * separated `vertical`.
  */
-export type Variant = Style|`${Style} ${Orientation}`|`${Orientation} ${Style}`;
+export type TabVariant = Style|`${Style} ${Orientation}`|`${Orientation} ${Style}`;
 
 /**
  * Tab component.
@@ -51,7 +51,7 @@ export class Tab extends LitElement {
    * include `vertical`.
    * Defaults to `primary`.
    */
-  @property({reflect: true}) variant: Variant = 'primary';
+  @property({reflect: true}) variant: TabVariant = 'primary';
 
   /**
    * Whether or not the tab is `disabled`.

tabs/lib/tabs.ts

@@ -7,7 +7,7 @@
 import {html, isServer, LitElement, PropertyValues} from 'lit';
 import {property, queryAssignedElements, state} from 'lit/decorators.js';
 
-import {Tab, Variant} from './tab.js';
+import {Tab, TabVariant} from './tab.js';
 
 const NAVIGATION_KEYS = new Map([
   ['default', new Set(['Home', 'End'])],
@@ -51,7 +51,7 @@ export class Tabs extends LitElement {
    * include `vertical`.
    * Defaults to `primary`.
    */
-  @property({reflect: true}) variant: Variant = 'primary';
+  @property({reflect: true}) variant: TabVariant = 'primary';
 
   /**
    * Whether or not the item is `disabled`.