@pairbo/ui-kit 0.0.1 → 0.0.3

package/src/components/radio-group/radio-group.styles.ts

@@ -1,19 +0,0 @@
-import { css } from "lit";
-
-export default css`
-  :host {
-    display: block;
-  }
-
-  .visually-hidden {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
-`;

package/src/components/radio-group/radio-group.ts

@@ -1,10 +0,0 @@
-import PboRadioGroup from "./radio-group.component.js";
-
-export * from "./radio-group.component.js";
-export default PboRadioGroup;
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "pbo-radio-group": PboRadioGroup;
-  }
-}

package/src/components/selector/selector.component.ts

@@ -1,115 +0,0 @@
-import { customElement, property, query } from "lit/decorators.js";
-import { html, LitElement, css, unsafeCSS } from "lit";
-import type { CSSResultGroup, ReactiveController } from "lit";
-import componentStyles from "../../styles/component.styles.js";
-import styles from "./selector.styles.js";
-import Choices from "choices.js";
-import choicesStyles from "choices.js/public/assets/styles/choices.css?inline";
-
-interface FontOption {
-  value: string;
-  label: string;
-  font: string;
-}
-
-@customElement("pbo-selector")
-export default class PboSelector extends LitElement {
-  static styles: CSSResultGroup = [componentStyles, styles, unsafeCSS(choicesStyles)];
-  @property({ type: Array }) fonts: FontOption[] = [
-    { value: "comic", label: "🖊️ Comic Sans", font: "'Comic Sans MS', cursive" },
-    { value: "times", label: "🔤 Times New Roman", font: "'Times New Roman', serif" },
-    { value: "arial", label: "📜 Arial", font: "'Arial', sans-serif" },
-    { value: "mono", label: "💻 Monospace", font: "'Courier New', monospace" },
-  ];
-
-  get value() {
-    return this._choices?.getValue().value;
-  }
-
-  @query(".js-choice") choiceEl!: HTMLSelectElement;
-  private _choices?: Choices;
-
-  firstUpdated() {
-    this._initializeChoices();
-  }
-
-  updated = (changedProperties: Map<string, any>) => {
-    if (changedProperties.has("fonts")) {
-      this._initializeChoices();
-    }
-  };
-
-  private _initializeChoices() {
-    // Destroy existing instance if it exists
-    this._choices?.destroy();
-
-    // Create new instance with current fonts
-    this._choices = new Choices(this.choiceEl, {
-      allowHTML: true,
-      searchEnabled: false,
-      shouldSort: false,
-      removeItemButton: false,
-      shadowRoot: this.shadowRoot,
-      choices: this.fonts.map((font, index) => ({
-        value: font.value,
-        label: font.label,
-        customProperties: { font: font.font },
-        selected: index === 0, // Select the first option by default
-      })),
-      placeholder: false,
-      shouldSortItems: false,
-      // callbackOnCreateTemplates: function (template, escapeForTemplate, getClassNames) {
-      //   return {
-      //     item: ({ classNames }, data) => {
-      //       const templateClassNames = [
-      //         getClassNames(classNames.item).join(" "),
-      //         getClassNames(data.highlighted ? classNames.highlightedState : classNames.itemSelectable).join(" "),
-      //       ].join(" ");
-      //       return template(`
-      //       <div class="${templateClassNames}"
-      //           data-item data-id="${data.id}" data-value="${escapeForTemplate(data.value)}" ${
-      //             data.active ? 'aria-selected="true"' : ""
-      //           } ${data.disabled ? 'aria-disabled="true"' : ""}
-      //            style="font-family: ${data.customProperties?.font || "inherit"}">
-      //         ${data.label}
-      //       </div>
-      //     `);
-      //     },
-      //     choice: ({ classNames }, data) => {
-      //       const templateClassNames = [
-      //         getClassNames(classNames.item).join(" "),
-      //         getClassNames(classNames.itemChoice).join(" "),
-      //         getClassNames(data.disabled ? classNames.itemDisabled : classNames.itemSelectable).join(" "),
-      //       ].join(" ");
-      //       return template(`
-      //       <div class="${templateClassNames}"
-      //           data-select-text="${this.config.itemSelectText}" data-choice ${
-      //             data.disabled ? 'data-choice-disabled aria-disabled="true"' : "data-choice-selectable"
-      //           } data-id="${data.id}" data-value="${escapeForTemplate(data.value)}" ${
-      //             data.groupId > 0 ? 'role="treeitem"' : 'role="option"'
-      //           }
-      //            style="font-family: ${data.customProperties?.font || "inherit"}">
-      //         ${data.label} choice
-      //       </div>
-      //     `);
-      //     },
-      //   };
-      // },
-    });
-
-    this.choiceEl.addEventListener("change", (event: Event) => {
-      const target = event.target as HTMLSelectElement;
-      this.dispatchEvent(
-        new CustomEvent("pbo-change", {
-          detail: { value: target.value },
-          bubbles: true,
-          composed: true,
-        })
-      );
-    });
-  }
-
-  render() {
-    return html`<select part="base" class="js-choice"></select>`;
-  }
-}

package/src/components/selector/selector.styles.ts

@@ -1,9 +0,0 @@
-import { css } from "lit";
-export default css`
-  :host {
-    display: block;
-  }
-  .is-open {
-    background-color: red;
-  }
-`;

package/src/components/selector/selector.ts

@@ -1,10 +0,0 @@
-import PboSelector from "./selector.component.js";
-
-export * from "./selector.component.js";
-export default PboSelector;
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "pbo-selector": PboSelector;
-  }
-}

package/src/components/textarea/textarea.component.ts

@@ -1,234 +0,0 @@
-import { customElement, property, query, state } from "lit/decorators.js";
-import { html } from "lit";
-import type { CSSResultGroup } from "lit";
-import componentStyles from "../../styles/component.styles.js";
-import PairboElement, { PairboFormControl } from "../../internal/pairbo-element.js";
-import styles from "./textarea.styles.js";
-import { FormControlController } from "../../internal/form.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { live } from "lit/directives/live.js";
-import { classMap } from "lit/directives/class-map.js";
-import formControlStyles from "../../styles/form-control.styles.js";
-
-/**
- * @summary Short summary of the component's intended use.
- * @status experimental
- *
- * @dependency pbo-example
- *
- * @event pbo-event-name - Emitted as an example.
- *
- * @slot - The default slot.
- * @slot example - An example slot.
- *
- * @csspart base - The component's base wrapper.
- *
- * @cssproperty --example - An example CSS custom property.
- */
-
-@customElement("pbo-textarea")
-export default class PboTextarea extends PairboElement implements PairboFormControl {
-  static styles: CSSResultGroup = [componentStyles, styles, formControlStyles];
-
-  private readonly formControlController = new FormControlController(this, {
-    assumeInteractionOn: ["pbo-input"],
-  });
-
-  // private resizeObserver: ResizeObserver;
-
-  defaultValue?: unknown;
-  defaultChecked?: boolean | undefined;
-  pattern?: string | undefined;
-  min?: string | number | Date | undefined;
-  max?: string | number | Date | undefined;
-  step?: number | "any" | undefined;
-
-  @query(".textarea__control") input: HTMLTextAreaElement;
-  @query(".textarea__size-adjuster") sizeAdjuster: HTMLTextAreaElement;
-
-  @state() hasFocus = false;
-
-  @property() name = "";
-  @property() value = "";
-  @property({ reflect: true }) size: "small" | "medium" | "large" = "medium";
-  @property({ type: Boolean, reflect: true }) filled = false;
-  @property() placeholder = "";
-  @property({ type: Number }) rows = 4;
-  @property() resize: "none" | "vertical" | "auto" = "vertical";
-  @property({ type: Boolean, reflect: true }) disabled = false;
-  @property({ type: Boolean, reflect: true }) readonly = false;
-
-  @property({ reflect: true }) form = "";
-  @property({ type: Boolean, reflect: true }) required = false;
-  @property({ type: Number }) minlength: number;
-  @property({ type: Number }) maxlength: number;
-
-  get validity() {
-    return this.input.validity;
-  }
-
-  get validationMessage() {
-    return this.input.validationMessage;
-  }
-
-  firstUpdated() {
-    this.formControlController.updateValidity();
-  }
-
-  private handleChange() {
-    this.value = this.input.value;
-    this.emit("pbo-change");
-  }
-
-  private handleBlur() {
-    this.hasFocus = false;
-    this.emit("pbo-blur");
-  }
-
-  private handleFocus() {
-    this.hasFocus = true;
-    this.emit("pbo-focus");
-  }
-
-  private handleInput() {
-    this.value = this.input.value;
-    this.emit("pbo-input");
-  }
-
-  private handleInvalid(event: Event) {
-    this.formControlController.setValidity(false);
-    this.formControlController.emitInvalidEvent(event);
-  }
-
-  /** Sets focus on the textarea. */
-  focus(options?: FocusOptions) {
-    this.input.focus(options);
-  }
-
-  /** Removes focus from the textarea. */
-  blur() {
-    this.input.blur();
-  }
-
-  /** Selects all the text in the textarea. */
-  select() {
-    this.input.select();
-  }
-
-  /** Gets or sets the textarea's scroll position. */
-  scrollPosition(position?: { top?: number; left?: number }): { top: number; left: number } | undefined {
-    if (position) {
-      if (typeof position.top === "number") this.input.scrollTop = position.top;
-      if (typeof position.left === "number") this.input.scrollLeft = position.left;
-      return undefined;
-    }
-
-    return {
-      top: this.input.scrollTop,
-      left: this.input.scrollTop,
-    };
-  }
-
-  /** Sets the start and end positions of the text selection (0-based). */
-  setSelectionRange(
-    selectionStart: number,
-    selectionEnd: number,
-    selectionDirection: "forward" | "backward" | "none" = "none"
-  ) {
-    this.input.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
-  }
-
-  /** Replaces a range of text with a new string. */
-  setRangeText(
-    replacement: string,
-    start?: number,
-    end?: number,
-    selectMode: "select" | "start" | "end" | "preserve" = "preserve"
-  ) {
-    const selectionStart = start ?? this.input.selectionStart;
-    const selectionEnd = end ?? this.input.selectionEnd;
-
-    this.input.setRangeText(replacement, selectionStart, selectionEnd, selectMode);
-
-    if (this.value !== this.input.value) {
-      this.value = this.input.value;
-    }
-  }
-
-  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
-  checkValidity() {
-    return this.input.checkValidity();
-  }
-
-  /** Gets the associated form, if one exists. */
-  getForm(): HTMLFormElement | null {
-    return this.formControlController.getForm();
-  }
-
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  reportValidity() {
-    return this.input.reportValidity();
-  }
-
-  /** Sets a custom validation message. Pass an empty string to restore validity. */
-  setCustomValidity(message: string) {
-    this.input.setCustomValidity(message);
-    this.formControlController.updateValidity();
-  }
-
-  render() {
-    return html` <div
-      part="form-control"
-      class=${classMap({
-        "form-control": true,
-        "form-control--small": this.size === "small",
-        "form-control--medium": this.size === "medium",
-        "form-control--large": this.size === "large",
-      })}
-    >
-      <div part="form-control-input" class="form-control-input">
-        <div
-          part="base"
-          class=${classMap({
-            textarea: true,
-            "textarea--small": this.size === "small",
-            "textarea--medium": this.size === "medium",
-            "textarea--large": this.size === "large",
-            "textarea--standard": !this.filled,
-            "textarea--filled": this.filled,
-            "textarea--disabled": this.disabled,
-            "textarea--focused": this.hasFocus,
-            "textarea--empty": !this.value,
-            "textarea--resize-none": this.resize === "none",
-            "textarea--resize-vertical": this.resize === "vertical",
-            "textarea--resize-auto": this.resize === "auto",
-          })}
-        >
-          <textarea
-            part="textarea"
-            id="input"
-            class="textarea__control"
-            title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}
-            name=${ifDefined(this.name)}
-            .value=${live(this.value)}
-            ?disabled=${this.disabled}
-            ?readonly=${this.readonly}
-            ?required=${this.required}
-            placeholder=${ifDefined(this.placeholder)}
-            rows=${ifDefined(this.rows)}
-            minlength=${ifDefined(this.minlength)}
-            maxlength=${ifDefined(this.maxlength)}
-            aria-describedby="help-text"
-            @change=${this.handleChange}
-            @input=${this.handleInput}
-            @invalid=${this.handleInvalid}
-            @focus=${this.handleFocus}
-            @blur=${this.handleBlur}
-          ></textarea>
-          <!-- This "adjuster" exists to prevent layout shifting. https://github.com/shoelace-style/shoelace/issues/2180 -->
-          <div part="textarea-adjuster" class="textarea__size-adjuster" ?hidden=${this.resize !== "auto"}></div>
-        </div>
-      </div>
-    </div>`;
-  }
-}

package/src/components/textarea/textarea.styles.ts

@@ -1,178 +0,0 @@
-import { css } from "lit";
-
-export default css`
-  :host {
-    display: block;
-  }
-
-  .textarea {
-    display: grid;
-    align-items: center;
-    position: relative;
-    width: 100%;
-    font-family: var(--sl-input-font-family);
-    font-weight: var(--sl-input-font-weight);
-    line-height: var(--sl-line-height-normal);
-    letter-spacing: var(--sl-input-letter-spacing);
-    vertical-align: middle;
-    transition:
-      var(--sl-transition-fast) color,
-      var(--sl-transition-fast) border,
-      var(--sl-transition-fast) box-shadow,
-      var(--sl-transition-fast) background-color;
-    cursor: text;
-  }
-
-  /* Standard textareas */
-  .textarea--standard {
-    background-color: var(--sl-input-background-color);
-    border: solid var(--sl-input-border-width) var(--sl-input-border-color);
-  }
-
-  .textarea--standard:hover:not(.textarea--disabled) {
-    background-color: var(--sl-input-background-color-hover);
-    border-color: var(--sl-input-border-color-hover);
-  }
-  .textarea--standard:hover:not(.textarea--disabled) .textarea__control {
-    color: var(--sl-input-color-hover);
-  }
-
-  .textarea--standard.textarea--focused:not(.textarea--disabled) {
-    background-color: var(--sl-input-background-color-focus);
-    border-color: var(--sl-input-border-color-focus);
-    color: var(--sl-input-color-focus);
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color);
-  }
-
-  .textarea--standard.textarea--focused:not(.textarea--disabled) .textarea__control {
-    color: var(--sl-input-color-focus);
-  }
-
-  .textarea--standard.textarea--disabled {
-    background-color: var(--sl-input-background-color-disabled);
-    border-color: var(--sl-input-border-color-disabled);
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .textarea__control,
-  .textarea__size-adjuster {
-    grid-area: 1 / 1 / 2 / 2;
-  }
-
-  .textarea__size-adjuster {
-    visibility: hidden;
-    pointer-events: none;
-    opacity: 0;
-  }
-
-  .textarea--standard.textarea--disabled .textarea__control {
-    color: var(--sl-input-color-disabled);
-  }
-
-  .textarea--standard.textarea--disabled .textarea__control::placeholder {
-    color: var(--sl-input-placeholder-color-disabled);
-  }
-
-  /* Filled textareas */
-  .textarea--filled {
-    border: none;
-    background-color: var(--sl-input-filled-background-color);
-    color: var(--sl-input-color);
-  }
-
-  .textarea--filled:hover:not(.textarea--disabled) {
-    background-color: var(--sl-input-filled-background-color-hover);
-  }
-
-  .textarea--filled.textarea--focused:not(.textarea--disabled) {
-    background-color: var(--sl-input-filled-background-color-focus);
-    outline: var(--sl-focus-ring);
-    outline-offset: var(--sl-focus-ring-offset);
-  }
-
-  .textarea--filled.textarea--disabled {
-    background-color: var(--sl-input-filled-background-color-disabled);
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .textarea__control {
-    font-family: inherit;
-    font-size: inherit;
-    font-weight: inherit;
-    line-height: 1.4;
-    color: var(--sl-input-color);
-    border: none;
-    background: none;
-    box-shadow: none;
-    cursor: inherit;
-    -webkit-appearance: none;
-  }
-
-  .textarea__control::-webkit-search-decoration,
-  .textarea__control::-webkit-search-cancel-button,
-  .textarea__control::-webkit-search-results-button,
-  .textarea__control::-webkit-search-results-decoration {
-    -webkit-appearance: none;
-  }
-
-  .textarea__control::placeholder {
-    color: var(--sl-input-placeholder-color);
-    user-select: none;
-    -webkit-user-select: none;
-  }
-
-  .textarea__control:focus {
-    outline: none;
-  }
-
-  /*
-   * Size modifiers
-   */
-
-  .textarea--small {
-    border-radius: var(--sl-input-border-radius-small);
-    font-size: var(--sl-input-font-size-small);
-  }
-
-  .textarea--small .textarea__control {
-    padding: 0.5em var(--sl-input-spacing-small);
-  }
-
-  .textarea--medium {
-    border-radius: var(--sl-input-border-radius-medium);
-    font-size: var(--sl-input-font-size-medium);
-  }
-
-  .textarea--medium .textarea__control {
-    padding: 0.5em var(--sl-input-spacing-medium);
-  }
-
-  .textarea--large {
-    border-radius: var(--sl-input-border-radius-large);
-    font-size: var(--sl-input-font-size-large);
-  }
-
-  .textarea--large .textarea__control {
-    padding: 0.5em var(--sl-input-spacing-large);
-  }
-
-  /*
-   * Resize types
-   */
-
-  .textarea--resize-none .textarea__control {
-    resize: none;
-  }
-
-  .textarea--resize-vertical .textarea__control {
-    resize: vertical;
-  }
-
-  .textarea--resize-auto .textarea__control {
-    height: auto;
-    resize: none;
-    overflow-y: hidden;
-  }
-`;

package/src/components/textarea/textarea.ts

@@ -1,10 +0,0 @@
-import PboTextarea from "./textarea.component.js";
-
-export * from "./textarea.component.js";
-export default PboTextarea;
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "pbo-textarea": PboTextarea;
-  }
-}