godown 3.0.0-canary.8 → 3.0.0-canary.9

package/dev/core/global-style.js

@@ -2,6 +2,7 @@ import { presetsRGB } from "@godown/colors/presets-rgb.js";
 import { travel } from "@godown/colors/travel.js";
 import GodownElement from "@godown/element";
 import GodownConfig from "@godown/element/config.js";
+import { joinProperties } from "@godown/element/tools/css.js";
 import { trim } from "@godown/element/tools/lib.js";
 import { css, unsafeCSS } from "lit";
 GodownElement.godownConfig ||= new GodownConfig();
@@ -36,17 +37,15 @@ GlobalStyle.styles = [
             const colorKey = scopePrefix("color", 2) + endKey;
             return `${colorKey}:rgb(${rgb});`;
         }, presetsRGB).join("")
+        + joinProperties({
+            [cssGlobalVars.background + ""]: `var(${cssGlobalVars._colors.darkgray[9]})`,
+            [cssGlobalVars.foreground + ""]: `var(${cssGlobalVars._colors.lightgray[0]})`,
+            [cssGlobalVars.active + ""]: `var(${cssGlobalVars._colors.blue[6]})`,
+            [cssGlobalVars.passive + ""]: `var(${cssGlobalVars._colors.darkgray[6]})`,
+            [cssGlobalVars.clipBackground + ""]: `linear-gradient(to bottom, var(${cssGlobalVars.foreground}), var(${cssGlobalVars.passive}))`,
+        })
         + "}"),
     css `
-    :host {
-      ${cssGlobalVars.background}: var(${cssGlobalVars._colors.darkgray[9]});
-      ${cssGlobalVars.foreground}: var(${cssGlobalVars._colors.lightgray[0]});
-      ${cssGlobalVars.active}: var(${cssGlobalVars._colors.blue[6]});
-      ${cssGlobalVars.passive}: var(${cssGlobalVars._colors.darkgray[6]});
-      ${cssGlobalVars.clipBackground}: linear-gradient(180deg, var(${cssGlobalVars.foreground}), var(${cssGlobalVars.passive}));
-    }
-  `,
-    css `
     * {
       border: 0;
       outline: 0;

package/dev/core/global-style.js.map

@@ -1 +1 @@
-{"version":3,"file":"global-style.js","sourceRoot":"","sources":["../../src/core/global-style.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"global-style.js","sourceRoot":"","sources":["../../src/core/global-style.ts"],"names":[],"mappings":"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"}

package/dev/core/super-input.d.ts

@@ -12,14 +12,14 @@ declare class SuperInput extends GlobalStyle {
      * default property records the default or initial value and is used to reset the input.
      */
     default: any;
-    _input: HTMLInputElement;
+    protected _input: HTMLInputElement;
     /**
      * Returns true when the input is compositing.
      */
     compositing: boolean;
     set defaultValue(value: typeof this.default);
     get defaultValue(): typeof this.default;
-    makeId: string;
+    protected makeId: string;
     namevalue(): [string, any];
     nameValue: () => [string, any];
     reset(): void;

package/dev/core/super-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"super-input.d.ts","sourceRoot":"","sources":["../../src/core/super-input.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAK/D,OAAO,EAAiB,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAoE/D,cACM,UAAW,SAAQ,WAAW;IAClC,SAAS,EAAE,OAAO,CAAC;IAEnB,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;IAG/B,QAAQ,EAAE,OAAO,CAAC;IAGlB,IAAI,EAAE,SAAS,CAAC;IAGhB,WAAW,EAAE,MAAM,CAAC;IAGpB,IAAI,EAAE,MAAM,CAAC;IAGb,KAAK,EAAE,GAAG,CAAC;IAEX;;OAEG;IAEH,OAAO,EAAE,GAAG,CAAC;IAGb,MAAM,EAAE,gBAAgB,CAAC;IAEzB;;OAEG;IACH,WAAW,EAAE,OAAO,CAAC;IAErB,IAAI,YAAY,CAAC,KAAK,EAAE,OAAO,IAAI,CAAC,OAAO,EAE1C;IAED,IAAI,YAAY,IAJQ,OAAO,IAAI,CAAC,OAAO,CAM1C;IAED,MAAM,SAAuC;IAE7C,SAAS,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC;IAI1B,SAAS,QAJI,CAAC,MAAM,EAAE,GAAG,CAAC,CAIC;IAE3B,KAAK;IAKL,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,YAAY,CAAC,gBAAgB,CAAC;IAgBxD,iBAAiB;IAKjB,SAAS,CAAC,cAAc;IAKxB,SAAS,CAAC,gBAAgB;IAU1B,SAAS,CAAC,gBAAgB,CAAC,CAAC,EAAE,OAAO,IAAI,CAAC,IAAI;IAM9C,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAI5B,SAAS,CAAC,YAAY;IAItB,SAAS,CAAC,aAAa;IAMvB,SAAS,CAAC,aAAa;CAiBxB;AAED,eAAe,UAAU,CAAC;AAE1B,KAAK,SAAS,GACV,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,KAAK,GACL,KAAK,GACL,OAAO,GACP,UAAU,GACV,UAAU,GACV,MAAM,GACN,OAAO,GACP,MAAM,GACN,MAAM,GACN,gBAAgB,GAChB,QAAQ,GACR,OAAO,GACP,OAAO,GACP,UAAU,GACV,OAAO,GACP,MAAM,GACN,OAAO,CAAC"}
+{"version":3,"file":"super-input.d.ts","sourceRoot":"","sources":["../../src/core/super-input.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAK/D,OAAO,EAAiB,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAoE/D,cACM,UAAW,SAAQ,WAAW;IAClC,SAAS,EAAE,OAAO,CAAC;IAEnB,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;IAG/B,QAAQ,EAAE,OAAO,CAAC;IAGlB,IAAI,EAAE,SAAS,CAAC;IAGhB,WAAW,EAAE,MAAM,CAAC;IAGpB,IAAI,EAAE,MAAM,CAAC;IAGb,KAAK,EAAE,GAAG,CAAC;IAEX;;OAEG;IAEH,OAAO,EAAE,GAAG,CAAC;IAGb,SAAS,CAAC,MAAM,EAAE,gBAAgB,CAAC;IAEnC;;OAEG;IACH,WAAW,EAAE,OAAO,CAAC;IAErB,IAAI,YAAY,CAAC,KAAK,EAAE,OAAO,IAAI,CAAC,OAAO,EAE1C;IAED,IAAI,YAAY,IAJQ,OAAO,IAAI,CAAC,OAAO,CAM1C;IAED,SAAS,CAAC,MAAM,SAAuC;IAEvD,SAAS,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC;IAI1B,SAAS,QAJI,CAAC,MAAM,EAAE,GAAG,CAAC,CAIC;IAE3B,KAAK;IAKL,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,YAAY,CAAC,gBAAgB,CAAC;IAgBxD,iBAAiB;IAKjB,SAAS,CAAC,cAAc;IAKxB,SAAS,CAAC,gBAAgB;IAU1B,SAAS,CAAC,gBAAgB,CAAC,CAAC,EAAE,OAAO,IAAI,CAAC,IAAI;IAM9C,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAI5B,SAAS,CAAC,YAAY;IAItB,SAAS,CAAC,aAAa;IAMvB,SAAS,CAAC,aAAa;CAiBxB;AAED,eAAe,UAAU,CAAC;AAE1B,KAAK,SAAS,GACV,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,KAAK,GACL,KAAK,GACL,OAAO,GACP,UAAU,GACV,UAAU,GACV,MAAM,GACN,OAAO,GACP,MAAM,GACN,MAAM,GACN,gBAAgB,GAChB,QAAQ,GACR,OAAO,GACP,OAAO,GACP,UAAU,GACV,OAAO,GACP,MAAM,GACN,OAAO,CAAC"}

package/dev/core/super-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"super-input.js","sourceRoot":"","sources":["../../src/core/super-input.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"super-input.js","sourceRoot":"","sources":["../../src/core/super-input.ts"],"names":[],"mappings":"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"}

package/index.js

@@ -26,6 +26,19 @@ import './text.js';
 import './time.js';
 import './tooltip.js';
 import './typewriter.js';
+export { default as Alert } from './components/alert.js';
+export { default as Avatar } from './components/avatar.js';
+export { default as Breath } from './components/breath.js';
+export { default as Button } from './components/button.js';
+export { default as Card } from './components/card.js';
+export { default as Carousel } from './components/carousel.js';
+export { default as Details } from './components/details.js';
+export { default as Dialog } from './components/dialog.js';
+export { default as Divider } from './components/divider.js';
+export { default as Dragbox } from './components/dragbox.js';
+export { default as Flex } from './components/flex.js';
+export { default as Form } from './components/form.js';
+export { default as Grid } from './components/grid.js';
 export { default as Input } from './components/input.js';
 export { default as Layout } from './components/layout.js';
 export { default as Link } from './components/link.js';
@@ -41,17 +54,4 @@ export { default as Text } from './components/text.js';
 export { default as Time } from './components/time.js';
 export { default as Tooltip } from './components/tooltip.js';
 export { default as Typewriter } from './components/typewriter.js';
-export { default as Alert } from './components/alert.js';
-export { default as Avatar } from './components/avatar.js';
-export { default as Breath } from './components/breath.js';
-export { default as Button } from './components/button.js';
-export { default as Card } from './components/card.js';
-export { default as Carousel } from './components/carousel.js';
-export { default as Details } from './components/details.js';
-export { default as Dialog } from './components/dialog.js';
-export { default as Divider } from './components/divider.js';
-export { default as Dragbox } from './components/dragbox.js';
-export { default as Flex } from './components/flex.js';
-export { default as Form } from './components/form.js';
-export { default as Grid } from './components/grid.js';
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "godown",
-  "version": "3.0.0-canary.8",
+  "version": "3.0.0-canary.9",
   "description": "Simple, stylized, semantic web components",
   "type": "module",
   "main": "index.js",

package/src/components/avatar.ts

@@ -14,6 +14,7 @@ const cssScope = scopePrefix(protoName);
  * Renders as an image if it has a src property,
  * otherwise falls back to name or nameless slot.
  *
+ * @slot - Display content if no `src` or `name` provided.
  * @category display
  */
 @godown(protoName)
@@ -43,9 +44,6 @@ const cssScope = scopePrefix(protoName);
       border-radius: inherit;
       width: 100%;
       height: 100%;
-    }
-
-    [part="root"] {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -58,6 +56,7 @@ class Avatar extends GlobalStyle {
    */
   @property()
   src: string | undefined | null;
+
   /**
    * If the image is not available, the {@linkcode Avatar.format} will be displayed.
    */

package/src/components/breath.ts

@@ -21,6 +21,7 @@ const cssScope = scopePrefix(defineName);
  *
  * Inspired by Vercel home page (2023).
  *
+ * @slot - Breathing parts.
  * @category effect
  */
 @godown(defineName)
@@ -91,6 +92,7 @@ class Breath extends GlobalStyle {
    */
   @property()
   text: string | string[];
+
   /**
    * Effect duration, ending in s or ms.
    */

package/src/components/button.ts

@@ -12,8 +12,8 @@ import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js
 const protoName = "button";
 const cssScope = scopePrefix(protoName);
 
-const whiteFont = cssGlobalVars._colors.lightgray[0];
-const blackFont = cssGlobalVars._colors.darkgray[6];
+const whiteFont = cssGlobalVars.white;
+const blackFont = cssGlobalVars.black;
 
 const colors = constructCSSObject(
   ["color", "background", "gradients"].map((k) => `${cssScope}--${k}`),
@@ -21,7 +21,7 @@ const colors = constructCSSObject(
     black: [
       whiteFont, // color
       cssGlobalVars._colors.darkgray[7], // background
-      cssGlobalVars._colors.darkgray[4], // gradients
+      cssGlobalVars._colors.darkgray[5], // gradients
     ],
     gray: [
       whiteFont, // color
@@ -81,7 +81,13 @@ const colors = constructCSSObject(
 /**
  * {@linkcode Button} renders a button.
  *
- * Color defaults to black.
+ * Create modal animation upon clicking.
+ *
+ * Available colors (background): none, black, gray, white, blue, green, red, orange, pink, purple, yellow, teal.
+ *
+ * Default color is `black`.
+ *
+ * Set the color to `none` to prevent applying styles.
  *
  * @category input
  */
@@ -168,7 +174,7 @@ const colors = constructCSSObject(
     @keyframes kf {
       0% {
         transform: scale(0) translate(-50%, -50%);
-        opacity: var(${cssScope}--modal-opacity, 0.18);
+        opacity: var(${cssScope}--modal-opacity, 0.1);
       }
       80% {
         transform: scale(1) translate(-50%, -50%);
@@ -185,46 +191,50 @@ class Button extends GlobalStyle {
    */
   @property({ type: Boolean, reflect: true })
   disabled: boolean;
+
   /**
    * Invert font and background color.
    */
   @property({ type: Boolean, reflect: true })
   ghost: boolean;
+
   /**
    * Whether this element is active or not.
    */
   @property({ type: Boolean, reflect: true })
   active: boolean;
+
   /**
    * Enables rounded corners to appear capsule shaped.
    */
   @property({ type: Boolean, reflect: true })
   round: boolean;
+
   /**
    * The primary color.
    */
   @property({ reflect: true })
   color: "none" | keyof typeof colors = "black";
+
   /**
-   * Text inside.
+   * Content text.
    */
   @property()
-  text: string;
+  content: string;
 
   @part("modal-root")
-  _modalRoot: HTMLElement;
+  protected _modalRoot: HTMLElement;
   @part("root")
-  _root: HTMLElement;
+  protected _root: HTMLElement;
 
   protected render() {
     const color = this.nextColor();
-    return [
-      html`<div part="root">
-        <span part="modal-root"></span>
-        <div part="slot">${this.text || htmlSlot()}</div>
-      </div>`,
-      htmlStyle(colors[color]),
-    ];
+    return html`<div part="root">
+      <span part="modal-root"></span>
+      <div part="slot">
+        ${[this.content || htmlSlot(), htmlStyle(colors[color])]}
+      </div>
+    </div>`;
   }
 
   focus() {

package/src/components/card.ts

@@ -1,7 +1,7 @@
 import { godown } from "@godown/element/decorators/godown.js";
 import { styles } from "@godown/element/decorators/styles.js";
 import { htmlSlot } from "@godown/element/directives/html-slot.js";
-import { css, html } from "lit";
+import { css } from "lit";
 import { property } from "lit/decorators.js";
 
 import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
@@ -26,58 +26,53 @@ const cssScope = scopePrefix(protoName);
 @styles(
   css`
     :host {
-      ${cssScope}--shadow-width: .0375em;
-      ${cssScope}--shadow-color: transparent;
       ${cssScope}--background: var(${cssGlobalVars.background});
-      ${cssScope}--divider-width: 100%;
-      ${cssScope}--divider-height: var(${cssScope}--shadow-width);
-      ${cssScope}--divider-background: var(${cssGlobalVars.passive});
+      ${cssScope}--border-width: .0375em;
+      ${cssScope}--border-color: transparent;
+      ${cssScope}--border-background: var(${cssGlobalVars.passive});
       ${cssScope}--padding: .75em;
       color: var(${cssGlobalVars.foreground});
       background: var(${cssScope}--background);
+      border-width: var(${cssScope}--border-width);
       display: block;
       flex-shrink: 0;
       position: relative;
       overflow: hidden;
       box-sizing: border-box;
-      border-radius: 0.25em;
-      transition: box-shadow .1s ease-in-out;
-    }
-    
-    :host([shadow="hover"]:hover),
-    :host([shadow="always"]) {
-      ${cssScope}--shadow-color: var(${cssScope}--divider-background);
-      box-shadow: inset 0 0 0px var(${cssScope}--shadow-width) var(${cssScope}--shadow-color);
-    }
-
-   [part="divider"] {
-      margin: auto;
-      width: var(${cssScope}--divider-width);
-      height: var(${cssScope}--divider-height);
-      background: var(${cssScope}--divider-background);
     }
 
     slot {
       display: block;
       padding: var(${cssScope}--padding);
     }
+
+    :host,
+    slot {
+      border-color: var(${cssScope}--border-background);
+      border-style: solid;
+    }
+
+    [name="footer"]{
+      border-top-width: var(${cssScope}--border-width);
+    }
+
+    [name="header"]{
+      border-bottom-width: var(${cssScope}--border-width);
+    }
   `,
 )
 class Card extends GlobalStyle {
-  @property({ reflect: true })
-  shadow: "none" | "always" | "hover" = "hover";
-
   @property({ type: Boolean })
   footer = false;
+
   @property({ type: Boolean })
   header = false;
 
   protected render() {
-    const hr = html`<hr part="divider">`;
     return [
-      this.header ? [htmlSlot("header"), hr] : "",
+      this.header ? htmlSlot("header") : "",
       htmlSlot(),
-      this.footer ? [hr, htmlSlot("footer")] : "",
+      this.footer ? htmlSlot("footer") : "",
     ];
   }
 }

package/src/components/carousel.ts

@@ -22,6 +22,7 @@ const protoName = "carousel";
  *
  * If no width, it will be the width of the first element.
  *
+ * @slot - Carousel items, should maintain the same size.
  * @category display
  */
 @godown(protoName)
@@ -76,11 +77,13 @@ class Carousel extends GlobalStyle {
    */
   @property({ type: Number })
   index = 0;
+
   /**
    * If autoChange > 0, the rotation will be automated.
    */
   @property({ type: Number })
   autoChange = 0;
+
   /**
    * Element width.
    */
@@ -88,13 +91,13 @@ class Carousel extends GlobalStyle {
   width: string;
 
   @part("move-root")
-  _moveRoot: HTMLElement;
+  protected _moveRoot: HTMLElement;
 
-  intervalID: number;
+  protected intervalID: number;
 
-  _cloneFirst: HTMLElement | undefined;
+  private _cloneFirst: HTMLElement | undefined;
 
-  _cloneLast: HTMLElement | undefined;
+  private _cloneLast: HTMLElement | undefined;
 
   protected render() {
     return [

package/src/components/details.ts

@@ -15,6 +15,9 @@ const cssScope = scopePrefix(protoName);
 /**
  * {@linkcode Details} similar to `<details>`.
  *
+ * @slot summary - Details summary if no `summary` is provided.
+ * @slot - Details content.
+ * @fires change - Fired when the details is toggled.
  * @category display
  */
 @godown(protoName)
@@ -87,6 +90,7 @@ class Details extends SuperOpenable {
    */
   @property({ type: Boolean })
   fill = false;
+
   /**
    * Summary text.
    */
@@ -94,7 +98,7 @@ class Details extends SuperOpenable {
   summary = "";
 
   @query("dd")
-  _dd: HTMLDataListElement;
+  protected _dd: HTMLDataListElement;
 
   protected render() {
     return html`<dl part="root">

package/src/components/dialog.ts

@@ -16,7 +16,7 @@ const cssScope = scopePrefix(protoName);
  *
  * Like dialog, it listens for submit events and closes itself when the target method is "dialog".
  *
- * It listens for the keydown event and also closes itself when the {@linkcode key} contained in the key is pressed
+ * It listens for the keydown event and also closes itself when the {@linkcode key} contained in the key is pressed.
  *
  * @category feedback
  */
@@ -87,13 +87,18 @@ const cssScope = scopePrefix(protoName);
   `,
 )
 class Dialog extends SuperOpenable {
+  /**
+   * Direction of the opening animation.
+   */
   @property()
   direction: Direction9 = "center";
+
   /**
    * Enable modal, blocking event penetration.
    */
   @property({ type: Boolean, reflect: true })
   modal = false;
+
   /**
    * Close key.
    */

package/src/components/dragbox.ts

@@ -43,17 +43,18 @@ class Dragbox extends GlobalStyle {
     return this.offsetParent?.clientHeight ?? document.body.offsetHeight;
   }
 
-  drag: boolean;
-  t: number;
-  l: number;
-  cx: number;
-  cy: number;
+  private drag: boolean;
+  private t: number;
+  private l: number;
+  private cx: number;
+  private cy: number;
 
   /**
    * Position x.
    */
   @property()
   x = "auto";
+
   /**
    * Position y.
    */
@@ -78,8 +79,8 @@ class Dragbox extends GlobalStyle {
     this._handleMouseLeave = this.events.add(document, "mouseleave", this._handleDragEnd.bind(this));
   }
 
-  _handleMouseMove: EventListenerFunc;
-  _handleMouseLeave: EventListenerFunc;
+  protected _handleMouseMove: EventListenerFunc;
+  protected _handleMouseLeave: EventListenerFunc;
 
   protected _handleDragEnd() {
     this.drag = false;

package/src/components/flex.ts

@@ -13,6 +13,7 @@ const protoName = "flex";
 /**
  * {@linkcode Flex} provides flex layout.
  *
+ * @slot - Flex items.
  * @category layout
  */
 @godown(protoName)
@@ -23,26 +24,30 @@ class Flex extends GlobalStyle {
    */
   @property({ attribute: "flex-flow" })
   flexFlow: string;
+
   /**
    * CSS property `gap`.
    */
   @property()
   gap: string;
+
   /**
    * CSS property `justify-content`.
    */
   @property()
   content: string;
+
   /**
    * CSS property `align-items`.
    */
   @property()
   items: string;
+
   /**
    * If true, set flex-direction to "column".
    */
   @property({ type: Boolean })
-  vertical: boolean;
+  vertical = false;
 
   protected render() {
     return [

package/src/components/form.ts

@@ -12,8 +12,6 @@ const protoName = "form";
  * {@linkcode Form} Gets child element key-value object,
  * which will be nested if the child element is the same as this element.
  *
- * @slot - Child elements.
- *
  * @category form
  */
 @godown(protoName)
@@ -27,6 +25,7 @@ const protoName = "form";
 class Form<T = object> extends GlobalStyle {
   @property()
   name = "";
+
   get value(): T {
     return Form.buildValue(this._slot.assignedElements()) as T;
   }

package/src/components/grid.ts

@@ -14,6 +14,7 @@ const protoName = "grid";
 /**
  * {@linkcode Grid} provides gird layout.
  *
+ * @slot - Grid items.
  * @category layout
  */
 @godown(protoName)
@@ -24,21 +25,29 @@ class Grid extends GlobalStyle {
    */
   @property()
   gap: string;
+
   /**
-   * CSS property `grid-template-columns`, if {@linkcode isNumerical} divide equally.
+   * CSS property `grid-template-columns`.
+   *
+   * If columns is numerical, divide columns equally.
    */
   @property()
   columns: string | number;
+
   /**
-   * CSS property `grid-template-rows`, if {@linkcode isNumerical} divide equally.
+   * CSS property `grid-template-rows`.
+   *
+   * If rows is numerical, divide rows equally.
    */
   @property()
   rows: string | number;
+
   /**
    * CSS property `place-content` (`align-content justify-content`).
    */
   @property()
   content: string;
+
   /**
    * CSS property `place-items` (`align-items justify-items`).
    */

package/src/components/input.ts

@@ -11,7 +11,7 @@ import SuperInput from "../core/super-input.js";
 const protoName = "input";
 
 /**
- * {@linkcode Input} used for text input.
+ * {@linkcode Input} renders a text input.
  *
  * @category input
  */
@@ -30,6 +30,7 @@ const protoName = "input";
 )
 class Input extends SuperInput {
   type: "text" | "search" | "tel" | "url" | "email" | "password" = "text";
+
   value: string;
 
   /**
@@ -39,7 +40,7 @@ class Input extends SuperInput {
   variant: "default" | "outline" = "default";
 
   @part("input")
-  _input: HTMLInputElement;
+  protected _input: HTMLInputElement;
 
   protected render() {
     return html`<div part="root" class="${classList("input-field", this.variant)}">