Cleans-up components (wip)

Author: d13

assets/bundle.js

@@ -95,7 +95,7 @@ <h3 slot="title">GitLens for VS Code</h3>
                 popular Git extension on the Visual Studio Marketplace with 29+ million installs and 2 million daily
                 active users.
               </p>
-              <dl>
+              <dl slot="meta">
                 <dt>Company</dt>
                 <dd>GitKraken</dd>
 
@@ -118,7 +118,7 @@ <h3 slot="title">Chirp Design System</h3>
                 between design and engineering and to grow our team's skill-set as well as the front-end culture at
                 Chewy.
               </p>
-              <dl>
+              <dl slot="meta">
                 <dt>Company</dt>
                 <dd>Chewy.com</dd>
 
@@ -140,7 +140,7 @@ <h3 slot="title">E-Commerce Hybrid <abbr title="Single Page Application">SPA</ab
                 Embedded with design and engineering teams to onboard the design system, implement experiments and
                 advise on front-end best practices. Shipped Chewy's first hybrid experience with Cart and Checkout.
               </p>
-              <dl>
+              <dl slot="meta">
                 <dt>Company</dt>
                 <dd>Chewy.com</dd>
 
@@ -162,7 +162,7 @@ <h3 slot="title">Legacy SaaS Application Redesign</h3>
                 Redesign of a large scale legacy web application with over 100 screens. Incorporated a new design system
                 as part of the redesign.
               </p>
-              <dl>
+              <dl slot="meta">
                 <dt>Company</dt>
                 <dd>ScribbleLive (ion interactive)</dd>
 
@@ -184,7 +184,7 @@ <h3 slot="title">SaaS Design System</h3>
                 Created a design system for our core applications and advocated for atomic design practices org-wide.
                 Created a CSS architecture for classification, naming and hierarchy, implemented in four applications.
               </p>
-              <dl>
+              <dl slot="meta">
                 <dt>Company</dt>
                 <dd>ScribbleLive (ion interactive)</dd>
 
@@ -205,7 +205,7 @@ <h3 slot="title">Quiz and Assessment Builder</h3>
               <p>
                 Developed publishing and participant UIs for collecting and visualizing participant and aggregate data.
               </p>
-              <dl>
+              <dl slot="meta">
                 <dt>Company</dt>
                 <dd>ion interactive</dd>
 
@@ -233,7 +233,7 @@ <h3 slot="title">Interactive Content Builder</h3>
                 draggable elements and interactive menus. Created highly customizable web components with app-like
                 interactivity and mobile-first responsiveness.
               </p>
-              <dl>
+              <dl slot="meta">
                 <dt>Company</dt>
                 <dd>ion interactive</dd>
 
@@ -256,7 +256,7 @@ <h3 slot="title">Telephony System Dashboard</h3>
                 popular Git extension on the Visual Studio Marketplace with 29+ million installs and 2 million daily
                 active users.
               </p> -->
-              <dl>
+              <dl slot="meta">
                 <dt>Company</dt>
                 <dd>Stealth</dd>
 
@@ -279,7 +279,7 @@ <h3 slot="title">Landing Page Concept</h3>
                 popular Git extension on the Visual Studio Marketplace with 29+ million installs and 2 million daily
                 active users.
               </p> -->
-              <dl>
+              <dl slot="meta">
                 <dt>Company</dt>
                 <dd>Landing Page Design</dd>
 
@@ -302,7 +302,7 @@ <h3 slot="title">Redesign &amp; Vacation Packaging</h3>
                 restructured the entire website's markup and styles, resulting in a modular, easy to implement, set of
                 reusable interface patterns and JavaScript modules.
               </p>
-              <dl>
+              <dl slot="meta">
                 <dt>Company</dt>
                 <dd>Spirit Airlines</dd>
 
@@ -320,7 +320,7 @@ <h3 slot="title">Cruise Microsite</h3>
                 popular Git extension on the Visual Studio Marketplace with 29+ million installs and 2 million daily
                 active users.
               </p> -->
-              <dl>
+              <dl slot="meta">
                 <dt>Company</dt>
                 <dd>Bahama Cruise Vacations</dd>
 

assets/bundle.js.map

@@ -1,7 +1,13 @@
 import { LitElement } from 'lit';
 
 export class KdBaseElement extends LitElement {
-  protected fireEvent(name: string, detail?: unknown) {
-    this.dispatchEvent(new CustomEvent(name, { detail }));
+  protected fireEvent<T = unknown>(name: string, detail?: T): boolean {
+    let event: CustomEvent<T>;
+    if (detail === undefined) {
+      event = new CustomEvent(name);
+    } else {
+      event = new CustomEvent(name, { detail });
+    }
+    return this.dispatchEvent(event);
   }
 }

index.html

@@ -7,17 +7,17 @@ export abstract class KdInteractiveElement extends KdBaseElement {
     delegatesFocus: true,
   };
 
-  abstract control: HTMLElement;
+  protected abstract _control: HTMLElement;
 
   override focus(options?: FocusOptions) {
-    this.control.focus(options);
+    this._control.focus(options);
   }
 
   override blur() {
-    this.control.blur();
+    this._control.blur();
   }
 
   override click() {
-    this.control.click();
+    this._control.click();
   }
 }

src/components/base/base-element.ts

@@ -9,23 +9,11 @@ export class KdFormButton extends KdFormElement {
   static override styles = [buttonBase];
 
   @query('.button', true)
-  private _buttonEl!: HTMLButtonElement;
+  protected _control!: HTMLButtonElement;
 
   @property({ reflect: true })
   override type: HTMLButtonElement['type'] = 'button';
 
-  override focus(options?: FocusOptions) {
-    this._buttonEl.focus(options);
-  }
-
-  override blur() {
-    this._buttonEl.blur();
-  }
-
-  override click() {
-    this._buttonEl.click();
-  }
-
   private handleClick() {
     switch (this.type) {
       case 'submit':
@@ -37,11 +25,11 @@ export class KdFormButton extends KdFormElement {
     }
   }
   private handleFocus() {
-    this.emit('kd-focus');
+    this.fireEvent('kd-focus');
   }
 
   private handleBlur() {
-    this.emit('kd-blur');
+    this.fireEvent('kd-blur');
   }
 
   override render() {

src/components/base/interactive-element.ts

@@ -1,36 +1,20 @@
 import { customElement, property, query } from 'lit/decorators.js';
-import { LitElement, html } from 'lit';
+import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { KdBaseElement } from '../base/base-element';
+import { KdInteractiveElement } from '../base/interactive-element';
 import { buttonBase } from './button.css';
 
 @customElement('kd-link-button')
-export class KdLinkButton extends KdBaseElement {
-  static override shadowRootOptions: ShadowRootInit = {
-    ...LitElement.shadowRootOptions,
-    delegatesFocus: true,
-  };
+export class KdLinkButton extends KdInteractiveElement {
   static override styles = [buttonBase];
 
   @query('.button', true)
-  private _buttonEl!: HTMLButtonElement;
+  protected _control!: HTMLButtonElement;
 
   @property() href?: HTMLAnchorElement['href'];
   @property() target?: HTMLAnchorElement['target'];
   @property() rel?: HTMLAnchorElement['rel'];
 
-  override focus(options?: FocusOptions) {
-    this._buttonEl.focus(options);
-  }
-
-  override blur() {
-    this._buttonEl.blur();
-  }
-
-  override click() {
-    this._buttonEl.click();
-  }
-
   override render() {
     return html`<a
       class="button"

src/components/button/form-button.ts

@@ -12,6 +12,7 @@ export class KdLifeEvent extends KdBaseElement {
         contain: content;
         display: flex;
         flex-direction: row;
+        gap: var(--spacing-xl);
       }
 
       *,
@@ -24,43 +25,6 @@ export class KdLifeEvent extends KdBaseElement {
         flex: 0 0 var(--size-5);
       }
 
-      .year {
-        position: relative;
-        display: inline-block;
-        font-size: var(--size--1);
-        line-height: 1;
-        font-weight: bold;
-        transform: translateX(-50%);
-        padding-inline: var(--spacing-lg) var(--spacing-xs);
-        padding-block: var(--spacing-xs);
-        margin-inline-start: var(--size-2);
-        background: var(--color-primary-background);
-        border: 2px solid var(--color-primary-foreground);
-      }
-
-      /* make an arrow before .year */
-      .year::before,
-      .year::after {
-        position: absolute;
-        inset-block: 50%;
-        inset-inline-start: var(--spacing-xs);
-        transform: translateY(-50%);
-        display: inline-block;
-        content: '';
-        block-size: var(--type-small-size);
-        aspect-ratio: 2/3;
-        clip-path: polygon(100% 50%, 0 0, 0 100%);
-        /* vertical-align: text-bottom; */
-      }
-
-      .year::before {
-        background: var(--color-raw-blue-50);
-      }
-      .year::after {
-        background: var(--color-raw-red-40);
-        transform: translateX(50%) translateY(-50%);
-      }
-
       .year2 {
         position: relative;
         display: flex;
@@ -72,11 +36,13 @@ export class KdLifeEvent extends KdBaseElement {
         width: max-content;
         padding-inline: var(--spacing-md);
         aspect-ratio: 1;
-        margin-inline-start: var(--size-3);
+        margin-inline: auto;
+        /* margin-inline-start: var(--size-3); */
         margin-block-start: var(--size-1);
-        transform: translateX(-50%) rotateZ(-45deg);
+        /* transform: translateX(-50%) rotateZ(-45deg); */
+        transform: rotateZ(-45deg);
         color: var(--color-primary-background);
-        background-color: var(--color-primary-background);
+        /* background-color: var(--color-primary-background); */
       }
 
       .year2::after {
@@ -112,9 +78,14 @@ export class KdLifeEvent extends KdBaseElement {
       }
 
       .event {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-lg);
       }
 
       .date-range {
+        line-height: 1;
       }
 
       .media {
@@ -127,11 +98,24 @@ export class KdLifeEvent extends KdBaseElement {
 
       .title {
         display: block;
+        line-height: 1;
       }
 
       .content {
         display: block;
       }
+
+      .meta {
+        display: block;
+      }
+
+      ::slotted(*) {
+        margin-block-start: 0;
+      }
+
+      ::slotted(*:last-child) {
+        margin-block-end: 0;
+      }
     `,
   ];
 
@@ -190,7 +174,7 @@ export class KdLifeEvent extends KdBaseElement {
           <slot name="title" class="title"></slot>
           <slot class="content"></slot>
         </div>
-        <div class="meta"></div>
+        <slot name="meta" class="meta"></slot>
       </article>
     `;
   }

src/components/button/link-button.ts

@@ -20,7 +20,8 @@ export class KdLifeEvents extends KdBaseElement {
         inline-size: 2px;
         background-color: var(--color-raw-blue-30);
         inset-block-start: 0;
-        inset-inline-start: var(--size-3);
+        inset-inline-start: calc(var(--size-5) / 2);
+        transform: translateX(-50%);
       }
 
       .events {