@shortfuse/materialdesignweb 0.7.1-3 → 0.7.1-5

package/mixins/ShapeMixin.js

@@ -38,9 +38,8 @@ export default function ShapeMixin(Base) {
         --mdw-shape__size__bottom-left-size: calc((var(--mdw-shape__ltr) * var(--mdw-shape__size__bottom-start-size)) + (var(--mdw-shape__rtl) * var(--mdw-shape__size__bottom-end-size)));
         --mdw-shape__size__bottom-right-size: calc((var(--mdw-shape__rtl) * var(--mdw-shape__size__bottom-start-size)) + (var(--mdw-shape__ltr) * var(--mdw-shape__size__bottom-end-size)));
       
+        /** By default, fallback to border-radius */
         --mdw-shape__rounded: 1;
-        --mdw-shape__mask-border-source: none;
-        --mdw-shape__mask: none;
         --mdw-shape__inline-start-deg: calc(var(--mdw-dir, 1) * -90deg);
         z-index: 0;
       }
@@ -104,15 +103,8 @@ export default function ShapeMixin(Base) {
       
       @supports(-webkit-mask-box-image: none) {
         :host {
+          /* Inherit all the way up to :root */
           --mdw-shape__rounded: inherit;
-          --mdw-shape__mask-border-source: inherit;
-      
-          -webkit-mask-box-image: var(--mdw-shape__mask-border-source)
-            8 fill /
-            var(--mdw-shape__size)
-            stretch;
-      
-          -webkit-mask: var(--mdw-shape__mask);
         }
       }
     `
@@ -154,6 +146,13 @@ export default function ShapeMixin(Base) {
 
       @supports(-webkit-mask-box-image: none) {
         .shape {
+          -webkit-mask-box-image: var(--mdw-shape__mask-border-source)
+            8 fill /
+            var(--mdw-shape__size)
+            stretch;
+    
+          -webkit-mask: var(--mdw-shape__mask);
+
           transition-duration: 200ms, 200ms, 200ms;
           transition-property: background-color, color, -webkit-mask-box-image-width;
           will-change: background-color, color, -webkit-mask-box-image;

package/mixins/TextFieldMixin.js

@@ -49,6 +49,9 @@ export default function TextFieldMixin(Base) {
       populatedState({ value, _badInput }) {
         return !!value || _badInput;
       },
+      _showLabelText({ label, filled, outlined }) {
+        return label && (filled || outlined);
+      },
     })
     .on({
       composed({ template, html, inline }) {
@@ -72,15 +75,17 @@ export default function TextFieldMixin(Base) {
         labelElement.setAttribute('focused', '{focusedState}');
         labelElement.setAttribute('label', '{label}');
         labelElement.setAttribute('shape-top', inline(({ shapeTop, filled }) => shapeTop || filled));
-        labelElement.append(html`
-          ${state}
-          ${outline}
-          <mdw-icon _if={icon} id=icon aria-hidden=true disabled={disabledState}>{icon}</mdw-icon>
-          <span _if={inputPrefix} class=inline id=prefix aria-hidden=true focused={focusedState} populated={populatedState}>{inputPrefix}</span>
-          <span _if={inputSuffix} class=inline id=suffix aria-hidden=true focused={focusedState} populated={populatedState}>{inputSuffix}</span>
-          <mdw-icon _if={trailingIcon} id=trailing-icon ink={trailingIconInk} aria-hidden=true disabled={disabledState}>{trailingIcon}</mdw-icon>
-          <div id=indicator _if={filled} focused={focusedState} hovered={hoveredState} errored={erroredState} disabled={disabledState} ></div>
-        `);
+        labelElement.append(
+          state,
+          outline,
+          html`
+            <mdw-icon _if={icon} id=icon aria-hidden=true disabled={disabledState}>{icon}</mdw-icon>
+            <span _if={inputPrefix} class=inline id=prefix aria-hidden=true focused={focusedState} populated={populatedState}>{inputPrefix}</span>
+            <span _if={inputSuffix} class=inline id=suffix aria-hidden=true focused={focusedState} populated={populatedState}>{inputSuffix}</span>
+            <mdw-icon _if={trailingIcon} id=trailing-icon ink={trailingIconInk} aria-hidden=true disabled={disabledState}>{trailingIcon}</mdw-icon>
+            <div id=indicator _if={filled} focused={focusedState} hovered={hoveredState} errored={erroredState} disabled={disabledState} ></div>
+          `,
+        );
 
         outline.setAttribute('invalid', '{invalid}');
         outline.setAttribute('errored', '{erroredState}');
@@ -98,7 +103,7 @@ export default function TextFieldMixin(Base) {
         state.setAttribute('_if', '{!outlined}');
 
         template.append(html`
-          <div id=label-text _if=${({ label, filled, outlined }) => label && (filled || outlined)} aria-hidden=true
+          <div id=label-text _if={_showLabelText} aria-hidden=true
             outlined={outlined}
             populated={populatedState}
             focused={focusedState}
@@ -240,6 +245,12 @@ export default function TextFieldMixin(Base) {
         transition: none 100ms cubic-bezier(0.4, 0.0, 1, 1);
       }
 
+      #label[shape-top] {
+        --mdw-shape__size__bottom-start-size: 0px;
+        --mdw-shape__size__bottom-end-size: 0px;
+        --mdw-shape__mask: linear-gradient(transparent 50%, black 50%);
+      }
+
       #prefix,
       #suffix,
       #control::placeholder {

package/mixins/TooltipTriggerMixin.js

@@ -1,4 +1,4 @@
-import Tooltip from '../components/Tooltip.js';
+import '../components/Tooltip.js';
 import { canAnchorPopup } from '../utils/popup.js';
 
 /**
@@ -10,10 +10,9 @@ export default function TooltipTriggerMixin(Base) {
       this.on({
         composed({ template, html }) {
           template.append(html`
-            <${Tooltip.elementName} role=tooltip id=tooltip
-            ><slot id=tooltip-slot
-              on-slotchange={onTooltipTriggerSlotChange} name=tooltip
-              >{tooltip}</slot></${Tooltip.elementName}>
+            <mdw-tooltip role=tooltip id=tooltip>
+              <slot id=tooltip-slot on-slotchange={onTooltipTriggerSlotChange} name=tooltip>{tooltip}</slot>
+            </mdw-tooltip>
           `);
         },
       });

package/package.json

@@ -1,18 +1,19 @@
 {
   "name": "@shortfuse/materialdesignweb",
-  "version": "0.7.1-3",
+  "version": "0.7.1-5",
   "description": "Material Design for Web",
   "type": "module",
   "scripts": {
-    "prebuild": "node bin/generate-css.js --custom=yellow,orange:orange,green:0f0,alias:aqua | npx esbuild --minify --loader=css > docs/theme.css",
-    "prebuild-alt": "node bin/generate-css.js --color=a46750 --custom=yellow,orange:orange,green:0f0,alias:aqua | npx esbuild --minify --loader=css > docs/alt-theme.css",
-    "build": "node build/esbuild.js --minify --metafile",
-    "watch": "node build/esbuild.js --watch --metafile",
-    "serve": "node build/esbuild.js --watch --metafile --serve --live",
+    "build": "node build/esbuild.js index.js --outdir=dist --minify --metafile",
+    "predocs": "node bin/generate-css.js --custom=yellow,orange:orange,green:0f0,alias:aqua | npx esbuild --minify --loader=css > docs/theme.css",
+    "predocs-alt": "node bin/generate-css.js --color=a46750 --custom=yellow,orange:orange,green:0f0,alias:aqua | npx esbuild --minify --loader=css > docs/alt-theme.css",
+    "docs": "node build/esbuild.js docs/demo.js --outdir=docs --minify --metafile",
+    "watch": "node build/esbuild.js docs/demo.js --outdir=docs --watch --metafile",
+    "serve": "node build/esbuild.js docs/demo.js --outdir=docs --watch --metafile --serve --live",
     "pretest": "eslint --ignore-path .gitignore",
     "test": "c8 tap --no-coverage"
   },
-  "browser": "index.js",
+  "browser": "dist/index.min.js",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/clshortfuse/materialdesignweb.git"
@@ -27,6 +28,7 @@
   ],
   "files": [
     "/bin",
+    "/dist",
     "/components",
     "/core",
     "/theming",
@@ -54,14 +56,16 @@
   },
   "homepage": "https://github.com/clshortfuse/materialdesignweb#readme",
   "devDependencies": {
+    "@types/html-minifier-terser": "^7.0.0",
     "@types/tap": "^15.0.7",
     "@typescript-eslint/eslint-plugin": "^5.30.7",
     "@typescript-eslint/parser": "^5.30.7",
+    "acorn": "^8.8.2",
+    "acorn-walk": "^8.2.0",
     "browserslist-to-esbuild": "^1.1.1",
     "c8": "^7.12.0",
     "element-internals-polyfill": "^1.1.11",
     "esbuild": "^0.17.12",
-    "esbuild-minify-templates": "^0.10.0",
     "eslint": "^8.24.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-plugin-compat": "^4.0.2",
@@ -70,7 +74,9 @@
     "eslint-plugin-jsdoc": "^40.0.3",
     "eslint-plugin-sort-class-members": "^1.15.2",
     "eslint-plugin-unicorn": "^46.0.0",
+    "html-minifier-terser": "^7.1.0",
     "http-server": "^14.1.1",
+    "magic-string": "^0.30.0",
     "postcss-styled": "^0.34.0",
     "postcss-styled-syntax": "^0.4.0",
     "stylelint": "^15.2.0",

package/index.js

@@ -1,77 +0,0 @@
-export { default as Badge } from './components/Badge.js';
-export { default as Body } from './components/Body.js';
-export { default as BottomAppBar } from './components/BottomAppBar.js';
-export { default as Box } from './components/Box.js';
-export { default as Button } from './components/Button.js';
-export { default as Card } from './components/Card.js';
-export { default as Checkbox } from './components/Checkbox.js';
-export { default as Chip } from './components/Chip.js';
-export { default as Dialog } from './components/Dialog.js';
-export { default as Divider } from './components/Divider.js';
-export { default as ExtendedFab } from './components/ExtendedFab.js';
-export { default as Fab } from './components/Fab.js';
-export { default as FilterChip } from './components/FilterChip.js';
-export { default as Headline } from './components/Headline.js';
-export { default as Icon } from './components/Icon.js';
-export { default as IconButton } from './components/IconButton.js';
-export { default as Input } from './components/Input.js';
-export { default as Label } from './components/Label.js';
-export { default as Layout } from './components/Layout.js';
-export { default as List } from './components/List.js';
-export { default as ListItem } from './components/ListItem.js';
-export { default as ListOption } from './components/ListOption.js';
-export { default as ListSelect } from './components/ListSelect.js';
-export { default as Menu } from './components/Menu.js';
-export { default as MenuItem } from './components/MenuItem.js';
-export { default as NavBar } from './components/NavBar.js';
-export { default as NavBarItem } from './components/NavBarItem.js';
-export { default as NavDrawer } from './components/NavDrawer.js';
-export { default as NavDrawerItem } from './components/NavDrawerItem.js';
-export { default as NavItem } from './components/NavItem.js';
-export { default as NavRail } from './components/NavRail.js';
-export { default as NavRailItem } from './components/NavRailItem.js';
-export { default as Pane } from './components/Pane.js';
-export { default as Progress } from './components/Progress.js';
-export { default as Radio } from './components/Radio.js';
-export { default as SegmentedButton } from './components/SegmentedButton.js';
-export { default as SegmentedButtonGroup } from './components/SegmentedButtonGroup.js';
-export { default as Select } from './components/Select.js';
-export { default as Slider } from './components/Slider.js';
-export { default as Snackbar } from './components/Snackbar.js';
-export { default as Surface } from './components/Surface.js';
-export { default as Switch } from './components/Switch.js';
-export { default as Tab } from './components/Tab.js';
-export { default as TabContent } from './components/TabContent.js';
-export { default as TabList } from './components/TabList.js';
-export { default as TabPanel } from './components/TabPanel.js';
-export { default as TextArea } from './components/TextArea.js';
-export { default as Title } from './components/Title.js';
-export { default as Tooltip } from './components/Tooltip.js';
-export { default as TopAppBar } from './components/TopAppBar.js';
-
-export { default as CustomElement } from './core/CustomElement.js';
-export { default as Composition } from './core/Composition.js';
-
-export { default as InputMixin } from './mixins/InputMixin.js';
-export { default as AriaReflectorMixin } from './mixins/AriaReflectorMixin.js';
-export { default as ControlMixin } from './mixins/ControlMixin.js';
-export { default as RTLObserverMixin } from './mixins/RTLObserverMixin.js';
-export { default as TouchTargetMixin } from './mixins/TouchTargetMixin.js';
-export { default as ShapeMixin } from './mixins/ShapeMixin.js';
-export { default as RippleMixin } from './mixins/RippleMixin.js';
-export { default as FormAssociatedMixin } from './mixins/FormAssociatedMixin.js';
-export { default as KeyboardNavMixin } from './mixins/KeyboardNavMixin.js';
-export { default as ResizeObserverMixin } from './mixins/ResizeObserverMixin.js';
-export { default as DensityMixin } from './mixins/DensityMixin.js';
-export { default as TooltipTriggerMixin } from './mixins/TooltipTriggerMixin.js';
-export { default as ScrollListenerMixin } from './mixins/ScrollListenerMixin.js';
-export { default as FlexableMixin } from './mixins/FlexableMixin.js';
-export { default as ThemableMixin } from './mixins/ThemableMixin.js';
-export { default as AriaToolbarMixin } from './mixins/AriaToolbarMixin.js';
-export { default as TextFieldMixin } from './mixins/TextFieldMixin.js';
-export { default as SurfaceMixin } from './mixins/SurfaceMixin.js';
-export { default as StateMixin } from './mixins/StateMixin.js';
-
-export * as themeLoader from './theming/loader.js';
-
-export * as theming from './theming/index.js';