@rolemodel/optics 2.3.1 → 2.5.0

package/dist/css/addons/fonts/phosphor_icons.css

@@ -1,14 +1,15 @@
 /*
   See all icons at: https://phosphoricons.com/
-  Current version: 2.1.1
+  See Changelog at: https://github.com/phosphor-icons/web/releases
+  Current version: 2.1.2
 */
 
-@import 'https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css';
-@import 'https://unpkg.com/@phosphor-icons/web@2.1.1/src/thin/style.css';
-@import 'https://unpkg.com/@phosphor-icons/web@2.1.1/src/light/style.css';
-@import 'https://unpkg.com/@phosphor-icons/web@2.1.1/src/bold/style.css';
-@import 'https://unpkg.com/@phosphor-icons/web@2.1.1/src/fill/style.css';
-@import 'https://unpkg.com/@phosphor-icons/web@2.1.1/src/duotone/style.css';
+@import 'https://unpkg.com/@phosphor-icons/web@2.1.2/src/regular/style.css';
+@import 'https://unpkg.com/@phosphor-icons/web@2.1.2/src/thin/style.css';
+@import 'https://unpkg.com/@phosphor-icons/web@2.1.2/src/light/style.css';
+@import 'https://unpkg.com/@phosphor-icons/web@2.1.2/src/bold/style.css';
+@import 'https://unpkg.com/@phosphor-icons/web@2.1.2/src/fill/style.css';
+@import 'https://unpkg.com/@phosphor-icons/web@2.1.2/src/duotone/style.css';
 
 /* Note: the important tag is how Phosphor sets up the fonts which is why we replicate them here */
 

package/dist/css/addons/fonts/tabler_icons.css

@@ -1,6 +1,7 @@
 /*
   See all icons at: https://tabler.io/icons
-  Current version: 3.30.0
+  See Changelog at: https://tabler.io/changelog
+  Current version: 3.44.0
 */
 
 @import 'https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.30.0/dist/tabler-icons.min.css';

package/dist/css/components/accordion.css

@@ -43,7 +43,7 @@
   }
 
   &[open] {
-    summary .accordion__marker {
+    > summary .accordion__marker {
       rotate: 0.25turn;
     }
 

package/dist/css/components/icon.css

@@ -26,6 +26,13 @@
   --_op-icon-optical-size-large: 40;
   --_op-icon-optical-size-x-large: 48;
 
+  /* SVG (.icon--svg) */
+  --_op-icon-stroke-width-light: 1;
+  --_op-icon-stroke-width-normal: 1.5;
+  --_op-icon-stroke-width-semi-bold: 2;
+  --_op-icon-stroke-width-bold: 2.5;
+  --_op-icon-svg-opacity-low-emphasis: 0.6;
+
   /* Private API (component option defaults) */
   --__op-icon-weight: var(--_op-icon-weight-normal);
   --__op-icon-fill: var(--_op-icon-fill-outlined);
@@ -53,18 +60,22 @@
   /* Weight Modifiers */
   &.icon--weight-light {
     --__op-icon-weight: var(--_op-icon-weight-light);
+    --__op-icon-stroke-width: var(--_op-icon-stroke-width-light);
   }
 
   &.icon--weight-normal {
     --__op-icon-weight: var(--_op-icon-weight-normal);
+    --__op-icon-stroke-width: var(--_op-icon-stroke-width-normal);
   }
 
   &.icon--weight-semi-bold {
     --__op-icon-weight: var(--_op-icon-weight-semi-bold);
+    --__op-icon-stroke-width: var(--_op-icon-stroke-width-semi-bold);
   }
 
   &.icon--weight-bold {
     --__op-icon-weight: var(--_op-icon-weight-bold);
+    --__op-icon-stroke-width: var(--_op-icon-stroke-width-bold);
   }
 
   /* Emphasis */
@@ -100,6 +111,25 @@
     --__op-icon-font-size: var(--_op-icon-font-size-x-large);
     --__op-icon-optical-size: var(--_op-icon-optical-size-x-large);
   }
+
+  /* SVG Modifier: an inline SVG instead of a font glyph, e.g. `icon icon--svg icon--large` */
+  &.icon--svg {
+    svg {
+      display: block;
+      block-size: 100%;
+      inline-size: 100%;
+    }
+
+    /* A rule on the <svg> root cannot beat a stroke-width attribute on a child, so target the attribute.
+       With no weight modifier the set keeps the widths it was drawn with. */
+    &:is(.icon--weight-light, .icon--weight-normal, .icon--weight-semi-bold, .icon--weight-bold) svg [stroke-width] {
+      stroke-width: var(--__op-icon-stroke-width);
+    }
+
+    &.icon--low-emphasis {
+      opacity: var(--_op-icon-svg-opacity-low-emphasis);
+    }
+  }
 }
 
 /* Material Icons class provided by the Google Fonts CDN */

package/dist/css/components/index.css

@@ -1,26 +1,26 @@
-@import 'accordion';
-@import 'alert';
-@import 'avatar';
-@import 'badge';
-@import 'breadcrumbs';
-@import 'button';
-@import 'button_group';
-@import 'card';
-@import 'confirm-dialog';
-@import 'content-header';
-@import 'divider';
-@import 'form';
-@import 'icon';
-@import 'modal';
-@import 'navbar';
-@import 'pagination';
-@import 'segmented-control';
-@import 'sidebar';
-@import 'side_panel';
-@import 'spinner';
-@import 'switch';
-@import 'tab';
-@import 'table';
-@import 'tag';
-@import 'text_pair';
-@import 'tooltip';
+@import 'accordion.css';
+@import 'alert.css';
+@import 'avatar.css';
+@import 'badge.css';
+@import 'breadcrumbs.css';
+@import 'button.css';
+@import 'button_group.css';
+@import 'card.css';
+@import 'confirm-dialog.css';
+@import 'content-header.css';
+@import 'divider.css';
+@import 'form.css';
+@import 'icon.css';
+@import 'modal.css';
+@import 'navbar.css';
+@import 'pagination.css';
+@import 'segmented-control.css';
+@import 'sidebar.css';
+@import 'side_panel.css';
+@import 'spinner.css';
+@import 'switch.css';
+@import 'tab.css';
+@import 'table.css';
+@import 'tag.css';
+@import 'text_pair.css';
+@import 'tooltip.css';

package/dist/css/components/text_pair.css

@@ -10,7 +10,11 @@
 
   display: flex;
   flex-direction: column;
-  gap: var(--op-space-x-small);
+
+  /* zero specificity. Lets utilities override */
+  :where(&) {
+    gap: var(--op-space-x-small);
+  }
 
   &.text-pair--inline {
     flex-direction: row;

package/dist/css/core/fonts/index.css

@@ -4,5 +4,5 @@
   https://developers.google.com/fonts/docs/material_symbols#variable_font_with_google_fonts
 */
 
-@import 'text_fonts';
-@import 'icon_fonts';
+@import 'text_fonts.css';
+@import 'icon_fonts.css';

package/dist/css/core/tokens/index.css

@@ -1,2 +1,2 @@
-@import 'base_tokens';
-@import 'scale_color_tokens';
+@import 'base_tokens.css';
+@import 'scale_color_tokens.css';

package/dist/css/core/utilities.css

@@ -94,6 +94,12 @@
 }
 
 /* Gap Properties */
+.gap-none {
+  gap: 0;
+
+  --op-gap: 0;
+}
+
 .gap-xxs {
   gap: var(--op-space-2x-small);
 
@@ -424,21 +430,27 @@
 .op-stack {
   display: flex;
   flex-direction: column;
-}
+  margin-block: 0;
+  margin-inline: 0;
 
-:where(.op-stack) {
-  gap: var(--op-space-medium);
+  /* zero specificity. Lets utilities override */
+  :where(&) {
+    gap: var(--op-space-medium);
+  }
 }
 
 /* Equivalent to .flex.flex-wrap.items-center.gap-md */
 .op-cluster {
   display: flex;
   flex-wrap: wrap;
-}
+  margin-block: 0;
+  margin-inline: 0;
 
-:where(.op-cluster) {
-  align-items: center;
-  gap: var(--op-space-medium);
+  /* zero specificity. Lets utilities override */
+  :where(&) {
+    align-items: center;
+    gap: var(--op-space-medium);
+  }
 }
 
 /* Equivalent to .flex.flex-wrap.items-center.justify-between.gap-md */
@@ -446,9 +458,144 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
+  margin-block: 0;
+  margin-inline: 0;
+
+  /* zero specificity. Lets utilities override */
+  :where(&) {
+    align-items: center;
+    gap: var(--op-space-medium);
+  }
 }
 
-:where(.op-split) {
-  align-items: center;
-  gap: var(--op-space-medium);
+/*
+  side by side layout with a small area and a large area
+  similar to .flex with a .flex-grow-1 within it, but with a more semantic name and wrap handling.
+
+  |[] [         ]|
+  |[         ] []| with end
+*/
+.op-flank {
+  display: flex;
+  margin-block: 0;
+  margin-inline: 0;
+
+  /* zero specificity. Lets utilities override */
+  :where(&) {
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--op-space-medium);
+  }
+
+  /* Small area */
+  &:not(.op-flank--end) > :first-child,
+  &.op-flank--end > :last-child {
+    flex-basis: auto;
+    flex-grow: 1;
+  }
+
+  /* Large area */
+  &:not(.op-flank--end) > :last-child,
+  &.op-flank--end > :first-child {
+    flex-basis: 0;
+    flex-grow: 999;
+  }
+}
+
+/* Grid Layout */
+.op-grid {
+  --_op-grid-min-column-size: var(--op-space-4x-large);
+  --_op-grid-max-column-size: 0px;
+
+  display: grid;
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(max(var(--_op-grid-min-column-size), var(--_op-grid-max-column-size)), 1fr)
+  );
+  margin-block: 0;
+  margin-inline: 0;
+
+  /* zero specificity. Lets utilities override */
+  :where(&) {
+    gap: var(--op-space-medium);
+  }
+
+  &.op-grid--2-column {
+    --_op-grid-max-column-size: calc(100% / 3);
+  }
+
+  &.op-grid--3-column {
+    --_op-grid-max-column-size: calc(100% / 4);
+  }
+
+  &.op-grid--4-column {
+    --_op-grid-max-column-size: calc(100% / 5);
+  }
+
+  &.op-grid--5-column {
+    --_op-grid-max-column-size: calc(100% / 6);
+  }
+
+  &.op-grid--6-column {
+    --_op-grid-max-column-size: calc(100% / 7);
+  }
+}
+
+/* Frame */
+@property --_op-frame-inline-size {
+  inherits: true;
+  initial-value: 100%;
+  syntax: '<length> | <percentage>';
+}
+
+.op-frame {
+  display: flex;
+  overflow: hidden;
+  border-radius: inherit;
+  aspect-ratio: 1 / 1;
+  margin-block: 0;
+  margin-inline: 0;
+  max-inline-size: var(--_op-frame-inline-size);
+
+  :where(&) {
+    align-items: center;
+    justify-content: center;
+  }
+
+  > img,
+  > video {
+    block-size: 100%;
+    inline-size: 100%;
+    object-fit: cover;
+  }
+
+  /* aspect ratio */
+
+  &.op-frame--square {
+    aspect-ratio: 1 / 1;
+  }
+
+  &.op-frame--landscape {
+    aspect-ratio: 16 / 9;
+  }
+
+  &.op-frame--portrait {
+    aspect-ratio: 9 / 16;
+  }
+
+  &.op-frame--4-3 {
+    aspect-ratio: 4 / 3;
+  }
+
+  &.op-frame--3-4 {
+    aspect-ratio: 3 / 4;
+  }
+
+  &.op-frame--3-2 {
+    aspect-ratio: 3 / 2;
+  }
+
+  &.op-frame--2-3 {
+    aspect-ratio: 2 / 3;
+  }
 }