19.2.0 release

.changeset/curvy-mangos-send.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(accordion): update expansion icon

.changeset/cyan-spiders-turn.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(link): updated legal link colors

.changeset/forty-poets-pump.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(icons): added new icons

.changeset/fuzzy-badgers-fix.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(button): added animation to buttons

.changeset/gold-hairs-mate.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(item-tile,item-tile-group): created new components

.changeset/heavy-webs-try.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(eek): flipped EEK direction

.changeset/tough-jobs-melt.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+fix(table): a11y fixes for table loading state

.gitignore

@@ -12,6 +12,7 @@ yarn.lock
 docs/_babel
 lint.log
 dist/bundles
+dist/.marko-run
 docs/static/*.min.css
 docs/static/*.min.css.map
 !docs/static/docs.min.css

dist/accordion/accordion.css

@@ -20,6 +20,13 @@ ul.accordion summary.details__summary {
     padding: 12px 16px;
 }
 
+ul.accordion summary.details__summary span.details__icon svg {
+    fill: var(
+        --details-secondary-foreground-color,
+        var(--color-foreground-secondary)
+    );
+}
+
 ul.accordion details .details__content {
     margin: 0 16px 6px;
     opacity: 0;
@@ -34,12 +41,6 @@ ul.accordion details[open] .details__content {
     opacity: 1;
     transform: scaleY(1);
 }
-
-ul.accordion--large summary.details__summary {
-    font-size: var(--font-size-large-1);
-    min-height: 52px;
-}
-
 ul.accordion details svg.details__expand,
 ul.accordion details[open] svg.details__collapse {
     display: inline-block;
@@ -50,6 +51,11 @@ ul.accordion details[open] svg.details__expand {
     display: none;
 }
 
+ul.accordion--large summary.details__summary {
+    font-size: var(--font-size-large-1);
+    min-height: 52px;
+}
+
 @media (prefers-reduced-motion) {
     ul.accordion details .details__content,
     ul.accordion details[open] .details__content {

dist/button/button.css

@@ -171,6 +171,12 @@ button.btn--primary {
         var(--color-foreground-on-accent)
     );
     font-weight: 700;
+    transition: all var(--motion-duration-short-3)
+        var(--motion-easing-quick-enter);
+}
+a.fake-btn--primary:active,
+button.btn--primary:active {
+    transform: scale(0.97);
 }
 
 a.fake-btn--primary {
@@ -324,11 +330,19 @@ a.fake-btn--secondary,
 button.btn--secondary {
     background-color: var(--btn-secondary-background-color, transparent);
     border-color: var(--btn-secondary-border-color, var(--color-stroke-accent));
+    color: var(
+        --btn-secondary-foreground-color,
+        var(--color-foreground-accent)
+    );
+    transition: all var(--motion-duration-short-3)
+        var(--motion-easing-quick-enter);
+}
+a.fake-btn--secondary:active,
+button.btn--secondary:active {
+    transform: scale(0.97);
 }
 
-a.fake-btn--secondary,
-a.fake-btn--secondary:visited,
-button.btn--secondary {
+a.fake-btn--secondary:visited {
     color: var(
         --btn-secondary-foreground-color,
         var(--color-foreground-accent)
@@ -435,6 +449,12 @@ a.fake-btn--secondary[aria-disabled="true"] {
 a.fake-btn--tertiary,
 button.btn--tertiary {
     border-color: var(--btn-tertiary-border-color, var(--color-stroke-default));
+    transition: all var(--motion-duration-short-3)
+        var(--motion-easing-quick-enter);
+}
+a.fake-btn--tertiary:active,
+button.btn--tertiary:active {
+    transform: scale(0.97);
 }
 
 a.fake-btn--tertiary[href]:focus,

dist/drawer-dialog/drawer-dialog.css

@@ -11,6 +11,7 @@
     -webkit-overflow-scrolling: touch;
     align-items: flex-end;
     overflow-y: auto;
+    overflow: hidden;
     position: fixed;
     right: 0;
     top: 0;

dist/eek/eek.css

@@ -1,6 +1,7 @@
 .eek {
     align-items: stretch;
     display: inline-flex;
+    flex-direction: row-reverse;
     font-family: Arial, sans-serif;
     font-weight: 700;
     height: 24px;
@@ -14,12 +15,14 @@
 .eek__container {
     align-items: center;
     border: 1px solid #000;
-    border-radius: 2px 0 0 2px;
-    border-right: none;
+    border-left: none;
+    border-radius: 0 2px 2px 0;
     display: inline-flex;
+    flex-direction: row-reverse;
 }
 
 .eek .icon--eek-arrow {
+    rotate: 180deg;
     width: 9px;
 }
 
@@ -38,7 +41,7 @@
     content: "";
     display: block;
     height: 19.7989898732px;
-    margin-top: 2.3px;
+    margin-block-start: 2.3px;
     position: relative;
     right: 12px;
     transform: rotate(45deg);
@@ -105,7 +108,7 @@
     color: #fff;
     display: inline-block;
     font-size: 18px;
-    margin-left: 8px;
+    margin-inline-end: 8px;
     text-shadow:
         -0.5px 0.5px 0 #000,
         0.5px 0.5px 0 #000,
@@ -161,10 +164,6 @@
         }
     }
 }
-[dir="rtl"] .eek .icon--eek-arrow {
-    transform: rotate(180deg);
-}
-[dir="rtl"] .eek__container {
-    border-left: none;
-    border-right: 1px solid #000;
+[dir="rtl"] .eek {
+    direction: ltr;
 }

dist/icon/icon.css

@@ -41,6 +41,11 @@ svg.icon--32-fit {
     height: 32px;
     width: 32px;
 }
+svg.icon--48,
+svg.icon--48-fit {
+    height: 48px;
+    width: 48px;
+}
 svg.icon--64,
 svg.icon--64-fit {
     height: 32px;

dist/item-tile-group/item-tile-group.css

@@ -0,0 +1,9 @@
+.item-tile-group .item-tile__title {
+    -webkit-line-clamp: 3;
+}
+
+@media (min-width: 768px) {
+    .item-tile-group .item-tile__title {
+        -webkit-line-clamp: 2;
+    }
+}

dist/item-tile/item-tile.css

@@ -0,0 +1,94 @@
+.item-tile {
+    display: grid;
+    gap: var(--spacing-200);
+    grid-area: body;
+    grid-template-areas: "header" "body";
+    grid-template-rows: auto 1fr;
+}
+
+.item-tile--list-view {
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-100);
+}
+
+.item-tile__header {
+    grid-area: header;
+}
+
+.item-tile__header .file-preview-card__body a {
+    display: block;
+    width: 100%;
+}
+
+.item-tile__header .file-preview-card__body a:focus-visible {
+    border-radius: var(
+        --item-tile-media-border-radius,
+        var(--border-radius-100)
+    );
+    outline-offset: 3px;
+}
+
+.item-tile__body {
+    display: grid;
+    grid-area: body;
+    grid-template-areas: "section-primary" "section-secondary" "section-tertiary";
+    grid-template-rows: 25px 0.75fr 1fr;
+}
+
+.item-tile--list-view .item-tile__header {
+    max-width: 200px;
+}
+
+.item-tile--list-view .item-tile__body {
+    display: flex;
+    flex-direction: column;
+}
+
+.item-tile__section-primary {
+    display: inline-block;
+    grid-area: section-primary;
+    margin-block-end: var(--spacing-50);
+}
+
+.item-tile__section-primary .signal {
+    margin: 0;
+}
+
+.item-tile__section-secondary {
+    grid-area: section-secondary;
+}
+
+.item-tile__section-tertiary {
+    grid-area: section-tertiary;
+}
+.item-tile__section-tertiary p {
+    margin-block-end: 0.2143em;
+    margin-block-start: 0;
+}
+
+.item-tile__section-tertiary a,
+.item-tile__title {
+    color: var(--color-foreground-link-primary);
+    text-decoration: none;
+}
+
+.item-tile__title {
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
+}
+
+.item-tile__title:hover {
+    color: var(--color-foreground-link-primary);
+    text-decoration: underline;
+}
+
+.item-tile__title:visited {
+    color: var(--color-foreground-link-visited);
+}
+
+.item-tile__subtitle {
+    color: var(--color-foreground-secondary);
+}

dist/panel-dialog/panel-dialog.css

@@ -10,7 +10,7 @@
     -webkit-overflow-scrolling: touch;
     flex-direction: column;
     overflow-y: auto;
-    overflow-y: hidden;
+    overflow: hidden;
     position: fixed;
     right: 0;
     top: 0;