npm - @pairbo/ui-kit - Versions diffs - 0.0.1 → 0.0.3 - Mend

@pairbo/ui-kit 0.0.1 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (152) hide show

package/dist/pairbo.es.js +15027 -0
package/dist/pairbo.umd.js +1633 -0
package/dist/src/components/button/button.component.d.ts +32 -0
package/dist/src/components/button/button.d.ts +8 -0
package/dist/src/components/button/button.styles.d.ts +2 -0
package/dist/src/components/button-group/button-group.component.d.ts +23 -0
package/dist/src/components/button-group/button-group.d.ts +8 -0
package/dist/src/components/button-group/button-group.styles.d.ts +2 -0
package/dist/src/components/card-selection/card-selection.component.d.ts +23 -0
package/dist/src/components/card-selection/card-selection.d.ts +8 -0
package/dist/src/components/card-selection/card-selection.styles.d.ts +2 -0
package/dist/src/components/category/category.component.d.ts +13 -0
package/dist/src/components/category/category.d.ts +8 -0
package/dist/src/components/category/category.styles.d.ts +2 -0
package/dist/src/components/category-image/category-image.component.d.ts +23 -0
package/dist/src/components/category-image/category-image.d.ts +8 -0
package/dist/src/components/category-image/category-image.styles.d.ts +2 -0
package/dist/src/components/drawer/drawer.component.d.ts +28 -0
package/dist/src/components/drawer/drawer.d.ts +8 -0
package/dist/src/components/drawer/drawer.styles.d.ts +2 -0
package/dist/src/components/editor/editor.component.d.ts +24 -0
package/dist/src/components/editor/editor.d.ts +8 -0
package/dist/src/components/editor/editor.styles.d.ts +2 -0
package/dist/src/components/fabric-example/fabric-example.component.d.ts +26 -0
package/dist/src/components/fabric-example/fabric-example.d.ts +8 -0
package/dist/src/components/fabric-example/fabric-example.styles.d.ts +2 -0
package/dist/src/components/image-slider/editor-card-slider.component.d.ts +41 -0
package/dist/src/components/image-slider/editor-card-slider.d.ts +8 -0
package/dist/src/components/image-slider/editor-card-slider.styles.d.ts +2 -0
package/dist/src/components/main.d.ts +15 -0
package/dist/src/components/message-selector/message-selector.component.d.ts +38 -0
package/dist/src/components/message-selector/message-selector.d.ts +8 -0
package/dist/src/components/message-selector/message-selector.styles.d.ts +2 -0
package/dist/src/components/message-selector/message-selector.test.d.ts +1 -0
package/dist/src/components/page-manager/page-manager.component.d.ts +41 -0
package/dist/src/components/page-manager/page-manager.d.ts +8 -0
package/dist/src/components/page-manager/page-manager.styles.d.ts +2 -0
package/dist/src/components/radio-button/radio-button.component.d.ts +37 -0
package/dist/src/components/radio-button/radio-button.d.ts +8 -0
package/dist/src/components/radio-button/radio-button.styles.d.ts +2 -0
package/dist/src/components/radio-group/radio-group.component.d.ts +56 -0
package/dist/src/components/radio-group/radio-group.d.ts +8 -0
package/dist/src/components/radio-group/radio-group.styles.d.ts +2 -0
package/dist/src/components/selector/selector.component.d.ts +18 -0
package/dist/src/components/selector/selector.d.ts +8 -0
package/dist/src/components/selector/selector.styles.d.ts +2 -0
package/dist/src/components/textarea/textarea.component.d.ts +78 -0
package/dist/src/components/textarea/textarea.d.ts +8 -0
package/dist/src/components/textarea/textarea.styles.d.ts +2 -0
package/dist/src/components/type-form/type-form.component.d.ts +48 -0
package/dist/src/components/type-form/type-form.d.ts +8 -0
package/dist/src/components/type-form/type-form.styles.d.ts +2 -0
package/dist/src/events/events.d.ts +1 -0
package/dist/src/events/pbo-category-card-select.d.ts +8 -0
package/dist/src/internal/form.d.ts +43 -0
package/{src/internal/pairbo-element.ts → dist/src/internal/pairbo-element.d.ts} +21 -46
package/dist/src/internal/slots.d.ts +12 -0
package/dist/src/internal/watch.d.ts +28 -0
package/dist/src/styles/component.styles.d.ts +2 -0
package/dist/src/styles/form-control.styles.d.ts +2 -0
package/package.json +12 -8
package/.husky/pre-commit +0 -1
package/.prettierignore +0 -16
package/.prettierrc.json +0 -17
package/cspell.json +0 -9
package/dev.html +0 -101
package/docs/README.md +0 -1
package/docs/_includes/component.njk +0 -16
package/docs/_includes/default.njk +0 -39
package/docs/_includes/sidebar.njk +0 -16
package/docs/eleventy.config.mjs +0 -72
package/docs/pages/components/message-selector.md +0 -17
package/docs/pages/fabric-example.html +0 -46
package/docs/pages/fabric-example.js +0 -28
package/docs/pages/index.md +0 -76
package/eslint.config.mjs +0 -32
package/ignote_temp +0 -3
package/index.html +0 -162
package/lint-stage.confg.js +0 -6
package/pages/card-selection.html +0 -65
package/pages/drawer.html +0 -47
package/pages/editor.html +0 -45
package/pages/page-mgn.html +0 -51
package/pages/test_build.html +0 -47
package/scripts/plop/plopfile.js +0 -51
package/scripts/plop/templates/components/component.hbs +0 -34
package/scripts/plop/templates/components/define.hbs +0 -10
package/scripts/plop/templates/components/styles.hbs +0 -7
package/src/components/button/button.component.ts +0 -93
package/src/components/button/button.styles.ts +0 -273
package/src/components/button/button.ts +0 -10
package/src/components/button-group/button-group.component.ts +0 -36
package/src/components/button-group/button-group.styles.ts +0 -7
package/src/components/button-group/button-group.ts +0 -10
package/src/components/card-selection/card-selection.component.ts +0 -43
package/src/components/card-selection/card-selection.styles.ts +0 -7
package/src/components/card-selection/card-selection.ts +0 -10
package/src/components/category/category.component.ts +0 -91
package/src/components/category/category.styles.ts +0 -27
package/src/components/category/category.ts +0 -10
package/src/components/category-image/category-image.component.ts +0 -38
package/src/components/category-image/category-image.styles.ts +0 -11
package/src/components/category-image/category-image.ts +0 -10
package/src/components/drawer/drawer.component.ts +0 -82
package/src/components/drawer/drawer.styles.ts +0 -54
package/src/components/drawer/drawer.ts +0 -10
package/src/components/editor/editor.component.ts +0 -135
package/src/components/editor/editor.styles.ts +0 -13
package/src/components/editor/editor.ts +0 -10
package/src/components/fabric-example/fabric-example.component.ts +0 -268
package/src/components/fabric-example/fabric-example.styles.ts +0 -23
package/src/components/fabric-example/fabric-example.ts +0 -12
package/src/components/image-slider/editor-card-slider.component.ts +0 -136
package/src/components/image-slider/editor-card-slider.styles.ts +0 -46
package/src/components/image-slider/editor-card-slider.ts +0 -9
package/src/components/main.ts +0 -17
package/src/components/message-selector/message-selector.component.ts +0 -154
package/src/components/message-selector/message-selector.styles.ts +0 -16
package/src/components/message-selector/message-selector.test.ts +0 -64
package/src/components/message-selector/message-selector.ts +0 -13
package/src/components/page-manager/page-manager.component.ts +0 -228
package/src/components/page-manager/page-manager.styles.ts +0 -9
package/src/components/page-manager/page-manager.ts +0 -10
package/src/components/radio-button/radio-button.component.ts +0 -118
package/src/components/radio-button/radio-button.styles.ts +0 -13
package/src/components/radio-button/radio-button.ts +0 -10
package/src/components/radio-group/radio-group.component.ts +0 -203
package/src/components/radio-group/radio-group.styles.ts +0 -19
package/src/components/radio-group/radio-group.ts +0 -10
package/src/components/selector/selector.component.ts +0 -115
package/src/components/selector/selector.styles.ts +0 -9
package/src/components/selector/selector.ts +0 -10
package/src/components/textarea/textarea.component.ts +0 -234
package/src/components/textarea/textarea.styles.ts +0 -178
package/src/components/textarea/textarea.ts +0 -10
package/src/components/type-form/type-form.component.ts +0 -121
package/src/components/type-form/type-form.styles.ts +0 -7
package/src/components/type-form/type-form.ts +0 -10
package/src/declaration.d.ts +0 -44
package/src/events/events.ts +0 -1
package/src/events/pbo-category-card-select.ts +0 -7
package/src/internal/form.ts +0 -376
package/src/internal/slots.ts +0 -54
package/src/internal/watch.ts +0 -79
package/src/styles/component.styles.ts +0 -17
package/src/styles/form-control.styles.ts +0 -59
package/temp +0 -20
package/tsconfig.json +0 -28
package/vite.config.ts +0 -26
/package/{public → dist}/Greeting Card from Pairbo.png +0 -0
/package/{src/components/fabric-example/fabric-example.test.ts → dist/src/components/fabric-example/fabric-example.test.d.ts} +0 -0
/package/{src → dist/src}/themes/default.css +0 -0

package/pages/test_build.html DELETED Viewed

@@ -1,47 +0,0 @@
-<!doctype html>
-<html>
-<head>
-  <title>Development</title>
-  <link rel="stylesheet" href="../src/themes/default.css">
-  <script src="https://cdn.jsdelivr.net/npm/@pairbo/ui-kit/dist/pairbo.umd.js"></script>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link
-    href="https://fonts.googleapis.com/css2?family=Kablammo&family=Monsieur+La+Doulaise&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
-    rel="stylesheet">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.0/cdn/themes/light.css" />
-  <script type="module"
-    src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.0/cdn/shoelace-autoloader.js"></script>
-  <script>
-    (() => {
-      document.documentElement.classList.toggle('pbo-theme-default', true);
-    })();
-  </script>
-</head>
-<body>
-  <div class="container">
-    <pbo-drawer>
-      <div part="body">
-        <pbo-page-manager></pbo-page-manager>
-      </div>
-    </pbo-drawer>
-  </div>
-  <button>Toggle modal</button>
-</body>
-<script>
-  const buttonEl = document.querySelector('button');
-  const modalEl = document.querySelector('pbo-drawer');
-  buttonEl.addEventListener('click', () => {
-    modalEl.show();
-  });
-</script>
-</html>

package/scripts/plop/plopfile.js DELETED Viewed

@@ -1,51 +0,0 @@
-export default function (plop) {
-  plop.setHelper("tagWithoutPrefix", tag => tag.replace(/^pbo-/, ""));
-  plop.setGenerator("controller", {
-    description: "application controller logic",
-    prompts: [
-      {
-        type: "input",
-        name: "tag",
-        message: "Tag name? (e.g. pbo-button)",
-        validate: value => {
-          if (!value || value.length === 0) {
-            return "Tag is required";
-          }
-          // start with pairbo- and include only a-z + dashes
-          if (!/^pbo-[a-z-]+$/.test(value)) {
-            return "Tag must start with 'pbo-' and contain only lowercase letters and dashes";
-          }
-          // No double dashes or ending dash
-          if (value.includes("--") || value.endsWith("-")) {
-            return "Tag cannot contain double dashes or end with a dash";
-          }
-          return true;
-        },
-      },
-    ],
-    actions: [
-      {
-        type: "add",
-        path: "../../src/components/{{ tagWithoutPrefix tag }}/{{ tagWithoutPrefix tag }}.ts",
-        templateFile: "templates/components/define.hbs",
-      },
-      {
-        type: "add",
-        path: "../../src/components/{{ tagWithoutPrefix tag }}/{{ tagWithoutPrefix tag }}.styles.ts",
-        templateFile: "templates/components/styles.hbs",
-      },
-      {
-        type: "add",
-        path: "../../src/components/{{ tagWithoutPrefix tag }}/{{ tagWithoutPrefix tag }}.component.ts",
-        templateFile: "templates/components/component.hbs",
-      },
-      {
-        type: "modify",
-        path: "../../src/components/main.ts",
-        pattern: /\/\* plop:component \*\//,
-        template: `export { default as {{ properCase tag }} } from './{{ tagWithoutPrefix tag }}/{{ tagWithoutPrefix tag }}.js';\n/* plop:component */`,
-      },
-    ],
-  });
-}

package/scripts/plop/templates/components/component.hbs DELETED Viewed

@@ -1,34 +0,0 @@
-import { customElement, property } from "lit/decorators.js";
-import { html, LitElement } from "lit";
-import type { CSSResultGroup } from "lit";
-import componentStyles from "../../styles/component.styles.js";
-import PairboElement from "../../internal/pairbo-element.js";
-import styles from "./{{ tagWithoutPrefix tag }}.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("{{ tag}}")
-export default class {{ properCase tag }} extends PairboElement {
-  static styles: CSSResultGroup = [componentStyles, styles];
-  /** An example attribute. */
-  @property() attr = 'example';
-  render() {
-    return html` <slot></slot> `;
-  }
-}

package/scripts/plop/templates/components/define.hbs DELETED Viewed

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

package/scripts/plop/templates/components/styles.hbs DELETED Viewed

@@ -1,7 +0,0 @@
-import { css } from "lit";
-export default css`
-  :host {
-    display: block;
-  }
-`;

package/src/components/button/button.component.ts DELETED Viewed

@@ -1,93 +0,0 @@
-import { customElement, property } from "lit/decorators.js";
-import { LitElement } from "lit";
-import type { CSSResultGroup, PropertyValues } from "lit";
-import componentStyles from "../../styles/component.styles.js";
-import styles from "./button.styles.js";
-import { html, literal } from "lit/static-html.js";
-import { classMap } from "lit/directives/class-map.js";
-import { HasSlotController } from "../../internal/slots.js";
-/**
- * @summary Short summary of the component's intended use.
- * @documentation https://shoelace.style/components/button
- * @status experimental
- *
- * @dependency sl-example
- *
- * @event sl-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-button")
-export default class PboButton extends LitElement {
-  static styles: CSSResultGroup = [componentStyles, styles];
-  private readonly hasSlotController = new HasSlotController(this, "[prefix]", "prefix", "suffix");
-  @property() href = "";
-  @property() name = "";
-  @property() value = "";
-  /* ------------------------- Button's theme variant ------------------------- */
-  @property({ reflect: true }) variant: "default" | "primary" | "success" | "neutral" | "warning" | "danger" | "text" =
-    "default";
-  /* ----------------------------- Button outline ----------------------------- */
-  @property({ type: Boolean, reflect: true }) outline = false;
-  /* ------------------------------- Button size ------------------------------ */
-  @property({ reflect: true }) size: "small" | "medium" | "large" = "medium";
-  /* ----------------------------- Circular Button ---------------------------- */
-  @property({ type: Boolean, reflect: true }) circle = false;
-  private isButton() {
-    return this.href ? false : true;
-  }
-  private isLink() {
-    return this.href ? true : false;
-  }
-  protected firstUpdated(_changedProperties: PropertyValues): void {
-    console.log({ componentStyles, styles });
-    console.log("Has default slot:", this.hasSlotController.test("[default]"));
-    console.log("Button classes:", this.shadowRoot?.querySelector(".button")?.classList);
-  }
-  render() {
-    const isLink = this.isLink();
-    const tag = isLink ? literal`a` : literal`button`;
-    return html`
-    <${tag}
-      part="base"
-      class= ${classMap({
-        button: true,
-        "button--default": this.variant === "default",
-        "button--primary": this.variant === "primary",
-        "button--success": this.variant === "success",
-        "button--neutral": this.variant === "neutral",
-        "button--warning": this.variant === "warning",
-        "button--danger": this.variant === "danger",
-        "button--text": this.variant === "text",
-        "button--small": this.size === "small",
-        "button--medium": this.size === "medium",
-        "button--large": this.size === "large",
-        "button--standard": !this.outline,
-        "button--outline": this.outline,
-        "button--has-label": this.hasSlotController.test("[default]"),
-        "button--has-prefix": this.hasSlotController.test("prefix"),
-        "button--has-suffix": this.hasSlotController.test("suffix"),
-        "button--circle": this.circle,
-        "button--disabled": false,
-      })}
-      href="${this.href}"
-    >
-      <slot name="prefix" part="prefix" class="button__prefix"></slot>
-      <slot part="label" class="button__label"></slot>
-      <slot name="suffix" part="suffix" class="button__suffix"></slot>
-    </${tag}>`;
-  }
-}

package/src/components/button/button.styles.ts DELETED Viewed

@@ -1,273 +0,0 @@
-import { css } from "lit";
-export default css`
-  /* --------------------------------- default -------------------------------- */
-  :host {
-    display: inline-block;
-    position: relative;
-    width: auto;
-    cursor: pointer;
-  }
-  .button {
-    display: inline-flex;
-    align-items: stretch;
-    justify-content: center;
-    width: 100%;
-    border-style: solid;
-    border-width: var(--pbo-input-border-width);
-    font-family: var(--pbo-input-font-family);
-    font-weight: var(--pbo-font-weight-semibold);
-    text-decoration: none;
-    user-select: none;
-    -webkit-user-select: none;
-    white-space: nowrap;
-    vertical-align: middle;
-    padding: 0;
-    transition:
-      var(--pbo-transition-x-fast) background-color,
-      var(--pbo-transition-x-fast) color,
-      var(--pbo-transition-x-fast) border,
-      var(--pbo-transition-x-fast) box-shadow;
-    cursor: inherit;
-  }
-  .button::-moz-focus-inner {
-    border: 0;
-  }
-  .button:focus {
-    outline: none;
-  }
-  .button:focus-visible {
-    outline: var(--pbo-focus-ring);
-    outline-offset: var(--pbo-focus-ring-offset);
-  }
-  /* -------------------------------- disabled -------------------------------- */
-  .button--disabled * {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-  /* ------------------------------- pre/suf-fix ------------------------------ */
-  .button__prefix,
-  .button__suffix {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    pointer-events: none;
-  }
-  /* ---------------------------------- label --------------------------------- */
-  .button__label {
-    display: inline-block;
-  }
-  .button__label::slotted(pbo-icon) {
-    vertical-align: -2px;
-  }
-  /* -------------------------------------------------------------------------- */
-  /*                              Standard buttons                              */
-  /* -------------------------------------------------------------------------- */
-  /* --------------------------------- default -------------------------------- */
-  .button--standard.button--default {
-    background-color: var(--pbo-color-neutral-0);
-    border-color: var(--pbo-input-border-color);
-    color: var(--pbo-color-neutral-700);
-  }
-  .button--standard.button--default:hover:not(.button--disabled) {
-    background-color: var(--pbo-color-primary-50);
-    border-color: var(--pbo-color-primary-300);
-    color: var(--pbo-color-primary-700);
-  }
-  .button--standard.button--default:active:not(.button--disabled) {
-    background-color: var(--pbo-color-primary-100);
-    border-color: var(--pbo-color-primary-400);
-    color: var(--pbo-color-primary-700);
-  }
-  /* --------------------------------- primary -------------------------------- */
-  /* --------------------------------- success -------------------------------- */
-  /* --------------------------------- neutral -------------------------------- */
-  /* --------------------------------- warning -------------------------------- */
-  /* --------------------------------- danger --------------------------------- */
-  /* -------------------------------------------------------------------------- */
-  /*                               Outline buttons                              */
-  /* -------------------------------------------------------------------------- */
-  .button--outline {
-    background: none;
-    border: solid 1px;
-  }
-  /* --------------------------------- default -------------------------------- */
-  .button--outline.button--default {
-    border-color: var(--pbo-input-border-color);
-    color: var(--pbo-color-neutral-700);
-  }
-  .button--outline.button--default:hover:not(.button--disabled),
-  .button--outline.button--default.button--checked:not(.button--disabled) {
-    border-color: var(--pbo-color-primary-600);
-    background-color: var(--pbo-color-primary-600);
-    color: var(--pbo-color-neutral-0);
-  }
-  /*
-   * Size modifiers
-   */
-  .button--small {
-    height: auto;
-    min-height: var(--pbo-input-height-small);
-    font-size: var(--pbo-button-font-size-small);
-    line-height: calc(var(--pbo-input-height-small) - var(--pbo-input-border-width) * 2);
-    border-radius: var(--pbo-input-border-radius-small);
-  }
-  .button--medium {
-    height: auto;
-    min-height: var(--pbo-input-height-medium);
-    font-size: var(--pbo-button-font-size-medium);
-    line-height: calc(var(--pbo-input-height-medium) - var(--pbo-input-border-width) * 2);
-    border-radius: var(--pbo-input-border-radius-medium);
-  }
-  .button--large {
-    height: auto;
-    min-height: var(--pbo-input-height-large);
-    font-size: var(--pbo-button-font-size-large);
-    line-height: calc(var(--pbo-input-height-large) - var(--pbo-input-border-width) * 2);
-    border-radius: var(--pbo-input-border-radius-large);
-  }
-  /*
-   * Outline buttons
-   */
-  .button--outline {
-    background: none;
-    border: solid 1px;
-  }
-  /* Default */
-  .button--outline.button--default {
-    border-color: var(--pbo-input-border-color);
-    color: var(--pbo-color-neutral-700);
-  }
-  .button--outline.button--default:hover:not(.button--disabled),
-  .button--outline.button--default.button--checked:not(.button--disabled) {
-    border-color: var(--pbo-color-primary-600);
-    background-color: var(--pbo-color-primary-600);
-    color: var(--pbo-color-neutral-0);
-  }
-  .button--outline.button--default:active:not(.button--disabled) {
-    border-color: var(--pbo-color-primary-700);
-    background-color: var(--pbo-color-primary-700);
-    color: var(--pbo-color-neutral-0);
-  }
-  /*
-   * Button spacing
-   */
-  .button--has-label.button--small .button__label {
-    padding: 0 var(--pbo-spacing-s);
-  }
-  .button--has-label.button--medium .button__label {
-    padding: 0 var(--pbo-spacing-m);
-  }
-  .button--has-label.button--large .button__label {
-    padding: 0 var(--pbo-spacing-l);
-  }
-  .button--has-prefix.button--small {
-    padding-inline-start: var(--pbo-spacing-xs);
-  }
-  .button--has-prefix.button--small .button__label {
-    padding-inline-start: var(--pbo-spacing-xs);
-  }
-  .button--has-prefix.button--medium {
-    padding-inline-start: var(--pbo-spacing-s);
-  }
-  .button--has-prefix.button--medium .button__label {
-    padding-inline-start: var(--pbo-spacing-s);
-  }
-  .button--has-prefix.button--large {
-    padding-inline-start: var(--pbo-spacing-s);
-  }
-  .button--has-prefix.button--large .button__label {
-    padding-inline-start: var(--pbo-spacing-s);
-  }
-  .button--has-suffix.button--small,
-  .button--caret.button--small {
-    padding-inline-end: var(--pbo-spacing-xs);
-  }
-  .button--has-suffix.button--small .button__label,
-  .button--caret.button--small .button__label {
-    padding-inline-end: var(--pbo-spacing-xs);
-  }
-  .button--has-suffix.button--medium,
-  .button--caret.button--medium {
-    padding-inline-end: var(--pbo-spacing-s);
-  }
-  .button--has-suffix.button--medium .button__label,
-  .button--caret.button--medium .button__label {
-    padding-inline-end: var(--pbo-spacing-s);
-  }
-  .button--has-suffix.button--large,
-  .button--caret.button--large {
-    padding-inline-end: var(--pbo-spacing-s);
-  }
-  .button--has-suffix.button--large .button__label,
-  .button--caret.button--large .button__label {
-    padding-inline-end: var(--pbo-spacing-s);
-  }
-  /* ------------------------------ Circle Button ----------------------------- */
-  .button--circle {
-    padding-left: 0;
-    padding-right: 0;
-  }
-  .button--circle.button--small {
-    width: var(--sl-input-height-small);
-    border-radius: 50%;
-  }
-  .button--circle.button--medium {
-    width: var(--sl-input-height-medium);
-    border-radius: 50%;
-  }
-  .button--circle.button--large {
-    width: var(--sl-input-height-large);
-    border-radius: 50%;
-  }
-`;

package/src/components/button/button.ts DELETED Viewed

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

package/src/components/button-group/button-group.component.ts DELETED Viewed

@@ -1,36 +0,0 @@
-import { customElement, property } from "lit/decorators.js";
-import { html, LitElement } from "lit";
-import type { CSSResultGroup } from "lit";
-import componentStyles from "../../styles/component.styles.js";
-import styles from "./button-group.styles.js";
-/**
- * @summary Short summary of the component's intended use.
- * @documentation https://shoelace.style/components/button-group
- * @status experimental
- *
- * @dependency sl-example
- *
- * @event sl-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-button-group")
-export default class PboButtonGroup extends LitElement {
-  static styles: CSSResultGroup = [componentStyles, styles];
-  /** An example attribute. */
-  @property() attr = "example";
-  render() {
-    return html`<div>
-      <slot></slot>
-    </div>`;
-  }
-}

package/src/components/button-group/button-group.styles.ts DELETED Viewed

@@ -1,7 +0,0 @@
-import { css } from "lit";
-export default css`
-  :host {
-    display: block;
-  }
-`;

package/src/components/button-group/button-group.ts DELETED Viewed

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

package/src/components/card-selection/card-selection.component.ts DELETED Viewed

@@ -1,43 +0,0 @@
-import { customElement, property } from "lit/decorators.js";
-import { html, LitElement } from "lit";
-import type { CSSResultGroup, PropertyValues } from "lit";
-import componentStyles from "../../styles/component.styles.js";
-import PairboElement from "../../internal/pairbo-element.js";
-import styles from "./card-selection.styles.js";
-import { map } from "lit/directives/map.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-card-selection")
-export default class PboCardSelection extends PairboElement {
-  static styles: CSSResultGroup = [componentStyles, styles];
-  @property({ type: Array }) categories: Category[] = [];
-  protected firstUpdated(_changedProperties: PropertyValues): void {
-    console.log(this.categories);
-  }
-  render() {
-    return html`
-      ${map(this.categories, category => {
-        return html`<pbo-category .cards=${category.cards} .name=${category.name}>
-          <h3 slot="title">${category.name}</h3>
-        </pbo-category>`;
-      })}
-    `;
-  }
-}

package/src/components/card-selection/card-selection.styles.ts DELETED Viewed

@@ -1,7 +0,0 @@
-import { css } from "lit";
-export default css`
-  :host {
-    display: block;
-  }
-`;

package/src/components/card-selection/card-selection.ts DELETED Viewed

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