@liuk123/insui 0.0.1-alpha.1

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@liuk123/insui",
+  "version": "0.0.1-alpha.1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=19.2.0",
+    "@angular/core": ">=19.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/liuk123-insui.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/liuk123-insui.mjs"
+    }
+  }
+}

package/styles/basic/main.less

@@ -0,0 +1,48 @@
+body {
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+ul,
+ol {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+// input,
+// button,
+// select,
+// textarea {
+//     font-family: inherit;
+//     color: inherit;
+// }
+
+hr {
+    margin: 0;
+    block-size: 1px;
+    border: none;
+    background: var(--ins-border-normal);
+}
+
+iframe {
+    border: none;
+}
+
+// html::selection {
+//     background-color: var(--ins-background-selected);
+// }
+
+::-ms-clear {
+    display: none;
+}
+
+::-ms-reveal {
+    display: none;
+}

package/styles/components/appearance.less

@@ -0,0 +1,39 @@
+@import '../ui-local.less';
+
+/**
+ * @name Appearance
+ * @selector [insAppearance]
+ *
+ * @description
+ * Base directive to apply different styles to interactive elements
+ *
+ * @attributes
+ * data-appearance — current appearance
+ * data-state — manual interactive state override ('active' | 'disabled' | 'hover')
+ * data-focus — manual :focus-visible state override
+ * data-mode — arbitrary manual mode like 'checked', 'invalid' or 'readonly'
+ *
+ * @example
+ * <button insAppearance data-appearance='primary'></button>
+ *
+ * @see-also
+ * Button
+ */
+[insAppearance] {
+    .transition(all);
+
+    position: relative;
+    appearance: none;
+    outline: 0.125rem solid transparent;
+    outline-offset: -0.125rem;
+    // transition-property: color, background-color, opacity, box-shadow, border, border-radius, filter;
+
+    .appearance-focus({
+        outline-color: var(--ins-border-focus);
+    });
+
+    .appearance-disabled({
+        cursor: initial;
+        opacity: var(--ins-disabled-opacity);
+    });
+}

package/styles/components/avatar.less

@@ -0,0 +1,108 @@
+@import '../ui-local.less';
+
+[insAvatar],
+ins-avatar {
+    --t-size: 3.5rem;
+    --t-radius: 0.75rem;
+
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+    inline-size: var(--t-size);
+    block-size: var(--t-size);
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    white-space: nowrap;
+    border-radius: var(--t-radius);
+    border: none;
+    background: var(--ins-background-neutral-1);
+    color: var(--ins-text-secondary);
+    vertical-align: middle;
+    box-sizing: border-box;
+    padding: 0.25rem;
+
+    &[data-size='xs'] {
+        --t-size: var(--ins-height-xs);
+        --t-radius: 0.5rem;
+
+        font: var(--ins-font-text-xs);
+        font-weight: bold;
+    }
+
+    &[data-size='s'] {
+        --t-size: var(--ins-height-s);
+        --t-radius: 0.5rem;
+
+        font: var(--ins-font-text-s);
+        font-weight: bold;
+    }
+
+    &[data-size='m'] {
+        --t-size: var(--ins-height-m);
+        --t-radius: 0.75rem;
+
+        font: var(--ins-font-text-l);
+        font-weight: bold;
+
+    }
+
+    &[data-size='l'] {
+        --t-size: var(--ins-height-l);
+        --t-radius: 0.75rem;
+
+        font: var(--ins-font-heading-5);
+    }
+
+    &[data-size='xl'] {
+        --t-size: 5rem;
+        --t-radius: 0.75rem;
+
+        font: var(--ins-font-heading-3);
+    }
+
+    &[data-size='xxl'] {
+        --t-size: 6.5rem;
+        --t-radius: 1rem;
+
+        font: var(--ins-font-heading-3);
+    }
+
+    &[data-size='xxxl'] {
+        --t-size: 9rem;
+        --t-radius: 1.25rem;
+
+        font: var(--ins-font-heading-2);
+
+    }
+
+
+    &._round {
+        --t-radius: calc(var(--t-size) / 2);
+    }
+
+    // &._svg img {
+    //     padding: 20%;
+    //     object-fit: contain;
+    // }
+
+    ins-icon {
+        .center-all();
+
+        inline-size: 60%;
+        block-size: 60%;
+    }
+
+    img,
+    picture,
+    video {
+        .fullsize();
+        inline-size: 100%;
+        block-size: 100%;
+
+        object-fit: cover;
+        box-sizing: border-box;
+        border-radius: inherit;
+        // transform: translateZ(0);
+    }
+}

package/styles/components/button.less

@@ -0,0 +1,145 @@
+@import '../ui-local.less';
+
+/**
+ * @name Button
+ * @selector [insButton], [insIconButton]
+ *
+ * @description
+ * Plain button design, applicable to both links and buttons
+ *
+ * @attributes
+ * data-size — size (default: 'l') ('xs' | 's' | 'm' | 'l')
+ *
+ * @example
+ * <button insButton>Click me</button>
+ *
+ * @see-also
+ * Icons, Appearance, Link
+ */
+[insButton],
+[insIconButton] {
+    --t-size: var(--ins-height-m);
+    --t-radius: var(--ins-radius-m);
+    --t-gap: 0.125rem;
+    --t-padding: 0 1rem;
+    --t-margin: -0.375rem;
+
+    .button-base();
+
+    block-size: var(--t-size);
+    justify-content: center;
+    border-radius: var(--t-radius);
+    padding: var(--t-padding);
+    user-select: none;
+    cursor: pointer;
+    font: var(--ins-font-text-m);
+
+    >.t-loader {
+        .center-all();
+
+        .t-text {
+            position: absolute;
+        }
+    }
+
+    &[data-size='xs'] {
+        --t-size: var(--ins-height-xs);
+        --t-radius: var(--ins-radius-xs);
+        --t-gap: 0.125rem;
+        --t-padding: 0 0.375rem;
+        --t-margin: -0.125rem;
+
+        font: var(--ins-font-text-s);
+
+        ins-svg,
+        ins-icon,
+        &::before {
+            font-size: 1rem;
+        }
+    }
+
+     &[data-size='s'] {
+        --t-size: var(--ins-height-s);
+        --t-radius: var(--ins-radius-s);
+        --t-gap: 0.125rem;
+        --t-padding: 0 0.625rem;
+        --t-margin: -0.125rem;
+
+        font: var(--ins-font-text-s);
+
+        ins-svg,
+        ins-icon,
+        &::before {
+            font-size: 1rem;
+        }
+    }
+
+    &[data-size='l'] {
+        --t-size: var(--ins-height-l);
+        --t-radius: var(--ins-radius-l);
+        --t-gap: 0.25rem;
+        --t-padding: 0 1.25rem;
+        --t-margin: -0.125rem;
+
+        font: var(--ins-font-text-l);
+        // font-weight: bold;
+
+        &::after {
+            margin-inline-end: -0.125rem;
+        }
+    }
+
+    &._loading {
+        --ins-disabled-opacity: 1;
+
+        -webkit-text-fill-color: transparent;
+
+        >*,
+        &::before,
+        &::after {
+            opacity: 0;
+        }
+
+        >.t-loader {
+            opacity: 1;
+        }
+    }
+
+    &[insIcons]::after {
+        font-size: 1rem;
+    }
+
+    &[insButtonVertical] {
+        --t-margin: ~'0rem' !important;
+        --t-line-height: 1rem;
+        // --t-margin: 0rem !important;
+
+        flex-direction: column;
+        flex-shrink: 1;
+        block-size: auto;
+        padding: 0.75rem;
+        gap: 0.375rem;
+        min-inline-size: 5rem;
+        white-space: pre-line;
+        font: var(--ins-font-text-s);
+
+        &>* {
+            max-block-size: calc(var(--t-line-height) * 2);
+        }
+    }
+}
+
+[insIconButton] {
+    gap: 0;
+    inline-size: var(--t-size);
+    font-size: 0 !important;
+    padding: 0;
+
+    // &[data-size='l']::after {
+    //     margin: 0;
+    // }
+
+    // &&[style*='--t-icon-start:']::after {
+    //     display: none;
+    // }
+}

package/styles/components/checkbox.less

@@ -0,0 +1,81 @@
+@import '../ui-local.less';
+
+/**
+ * @name Checkbox
+ * @selector [insCheckbox]
+ *
+ * @description
+ * A stylized input type="checkbox"
+ *
+ * @attributes
+ * data-size — size (default: 'm') ('s' | 'm')
+ *
+ * @vars
+ * --t-checked-icon — checkmark icon
+ * --t-indeterminate-icon — indeterminate state icon
+ *
+ * @example
+ * <input type="checkbox" insCheckbox />
+ *
+ * @see-also
+ * Switch, Radio, Appearance
+ */
+[insCheckbox] {
+    --t-size: 1.5rem;
+    --t-radius: var(--ins-radius-s);
+
+    inline-size: var(--t-size);
+    block-size: var(--t-size);
+    border-radius: var(--t-radius);
+    cursor: pointer;
+    margin: 0;
+    flex-shrink: 0;
+
+    &::before {
+        .fullsize(absolute, inset);
+
+        content: '';
+        inline-size: 1rem;
+        block-size: 1rem;
+        margin: auto;
+        background: currentColor;
+        mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"></svg>') center/100%;
+        transform: scale(0);
+        transition:
+            transform var(--ins-duration) ease-in-out,
+            mask 0s var(--ins-duration) ease-in-out;
+    }
+
+    &:disabled._readonly {
+        opacity: 1;
+    }
+
+    &:checked,
+    &:indeterminate {
+        &::before {
+            mask-image: var(--t-checked-icon);
+            transform: scale(1);
+            transition:
+                transform var(--ins-duration) ease-in-out,
+                mask 0s ease-in-out;
+        }
+    }
+
+    &:indeterminate::before {
+        mask-image: var(--t-indeterminate-icon);
+    }
+
+    &[data-size='s'] {
+        --t-size: 1rem;
+        --t-radius: var(--ins-radius-xs);
+
+        // &::before {
+        //     inline-size: 0.875rem;
+        //     block-size: 0.875rem;
+        // }
+    }
+    &:invalid:not([data-mode]),
+    &[data-mode~='invalid'] {
+        color: #fff;
+    }
+}

package/styles/components/chip.less

@@ -0,0 +1,109 @@
+@import '../ui-local.less';
+
+/**
+ * @name Chip
+ * @selector ins-chip, [insChip]
+ *
+ * @description
+ * A chip component that can be used on it's own or on buttons/links/inputs
+ *
+ * @attributes
+ * data-size — size (default: 's') ('xxs' | 'xs' | 's' | 'm')
+ *
+ * @example
+ * <ins-chip>Sale</ins-badge>
+ *
+ * @see-also
+ * Icons, Appearance, Badge, Block
+ */
+[insChip] {
+    --t-gap: 0.125rem;
+    --t-margin: -0.125rem;
+    --t-icon-size: 1.2rem;
+    --t-padding: 0 0.625rem;
+    --t-size: var(--ins-height-m);
+
+    .button-base();
+
+    font: var(--ins-font-text-m);
+    border-radius: var(--ins-radius-m);
+    padding: var(--t-padding);
+    block-size: var(--t-size);
+    inline-size: fit-content;
+    min-inline-size: 2rem;
+    isolation: isolate;
+
+    .interactive({
+        cursor: pointer;
+    });
+
+    > ins-icon,
+    &[insIcons]::before,
+    &[insIcons]::after {
+        font-size: var(--t-icon-size) !important;
+    }
+
+    & > [insIconButton] {
+        margin: -0.375rem;
+    }
+    &[data-size='xs'] {
+        --t-padding: 0 0.375rem;
+        --t-size: var(--ins-height-xs);
+
+        font: var(--ins-font-text-xs);
+        border-radius: var(--ins-radius-xs);
+
+        & > [insIconButton] {
+            margin: -0.175rem;
+        }
+    }
+    &[data-size='s'] {
+        --t-padding: 0 0.625rem;
+        --t-size: var(--ins-height-s);
+
+        font: var(--ins-font-text-s);
+        border-radius: var(--ins-radius-s);
+
+        & > [insIconButton] {
+            margin: -0.375rem;
+        }
+    }
+
+    &[data-size='l'] {
+        --t-margin: -0.375rem;
+        --t-icon-size: 1.5rem;
+        --t-padding: 0 1rem;
+        --t-size: var(--ins-height-l);
+
+        font: var(--ins-font-text-l);
+
+        & > [insIconButton] {
+            margin: -0.75rem;
+        }
+    }
+
+    & > img,
+    ins-avatar {
+        inline-size: 1.5rem;
+        block-size: 1.5rem;
+        margin-inline-start: -0.375rem;
+    }
+
+    & > [insFade] {
+        &:first-of-type {
+            flex: 1 0 30%;
+            max-inline-size: fit-content;
+        }
+
+        &:last-of-type {
+            flex: 0 1 auto;
+        }
+    }
+    
+    & > input[insChip] {
+        .fullsize();
+
+        // z-index: -1;
+        margin: 0;
+    }
+}

package/styles/components/group.less

@@ -0,0 +1,155 @@
+/**
+ * @name Group
+ * @selector [insGroup]
+ *
+ * @description
+ * A directive to combine children into rounded flex group
+ *
+ * @attributes
+ * data-size — size (default: 'l') ('s' | 'm' | 'l')
+ * data-orientation — orientation (default: 'horizontal') ('horizontal' | 'vertical')
+ *
+ * @example
+ * <div insGroup>
+ *   <button insButton>Click me</button>
+ *   <button insButton>Click me</button>
+ *   <button insButton>Click me</button>
+ * </div>
+ *
+ * @see-also
+ * Button, Block, Textfield
+ */
+ [insGroup] {
+    // position: relative;
+    display: flex;
+    // isolation: isolate;
+
+    --t-group-radius: var(--ins-radius-l);
+    --t-group-margin: -1px;
+    --t-group-mask: linear-gradient(
+        to right,
+        rgba(0, 0, 0, 0.5) 1px,
+        #000 2px,
+        #000 calc(100% - 2px),
+        rgba(0, 0, 0, 0.5)
+    );
+    --t-group-mask-end: linear-gradient(to right, rgba(0, 0, 0, 0.5) 1px, #000 2px);
+    --t-group-mask-start: linear-gradient(to right, #000 calc(100% - 2px), rgba(0, 0, 0, 0.5) calc(100% - 1px));
+
+    & > * {
+        z-index: 1;
+        flex: 1 1 0;
+        min-inline-size: 0;
+        mask: var(--t-group-mask);
+        mask-clip: no-clip;
+
+        &:disabled,
+        &._disabled {
+            z-index: 0;
+        }
+
+        &:invalid:not([data-mode]),
+        &[data-mode~='invalid'] {
+            z-index: 2;
+
+            --t-group-mask: none;
+        }
+
+        &:has(:invalid:not([data-mode])),
+        &:has([data-mode~='invalid']) {
+            z-index: 2;
+
+            --t-group-mask: none;
+        }
+
+        &:has(:focus-visible) {
+            z-index: 3;
+
+            --t-group-mask: none;
+        }
+
+        &:has([data-focus='true']) {
+            z-index: 3;
+
+            --t-group-mask: none;
+        }
+
+        &:checked:not([data-mode]),
+        &[data-mode~='checked'] {
+            z-index: 4;
+
+            --t-group-mask: none;
+        }
+
+        // &:has([insBlock]:checked) {
+        //     z-index: 4;
+
+        //     --t-group-mask: none;
+        // }
+
+        &:not(:last-child) {
+            margin-inline-end: var(--t-group-margin);
+        }
+
+        &:nth-child(n) {
+            border-radius: 0;
+        }
+
+        &:first-child {
+            border-radius: var(--t-group-radius) 0 0 var(--t-group-radius);
+            mask-image: var(--t-group-mask-start);
+        }
+
+        &:last-child {
+            border-radius: 0 var(--t-group-radius) var(--t-group-radius) 0;
+            mask-image: var(--t-group-mask-end);
+        }
+
+        &:only-child {
+            border-radius: var(--t-group-radius);
+            mask: none;
+        }
+    }
+
+    &[data-size='s'],
+    &[data-size='m'] {
+        --t-group-radius: var(--ins-radius-m);
+    }
+
+    &[data-orientation='vertical'] {
+        display: flex;
+        flex-direction: column;
+
+        --t-group-mask: linear-gradient(
+            to bottom,
+            rgba(0, 0, 0, 0.5) 1px,
+            #000 2px,
+            #000 calc(100% - 2px),
+            rgba(0, 0, 0, 0.5)
+        );
+        --t-group-mask-start: linear-gradient(to bottom, #000 calc(100% - 2px), rgba(0, 0, 0, 0.5) calc(100% - 1px));
+        --t-group-mask-end: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 1px, #000 2px);
+
+        & > * {
+            min-block-size: auto;
+            flex: 0 0 auto;
+
+            &:not(:last-child) {
+                margin-inline-end: 0;
+                margin-block-end: var(--t-group-margin);
+            }
+
+            &:first-child {
+                border-radius: var(--t-group-radius) var(--t-group-radius) 0 0;
+            }
+
+            &:last-child {
+                border-radius: 0 0 var(--t-group-radius) var(--t-group-radius);
+            }
+
+            &:only-child {
+                border-radius: var(--t-group-radius);
+            }
+        }
+    }
+}